/* Compact Contact Form 7 styles inside broker block */

.kryptokurs-broker-form .wpcf7,
.wp-block-kryptokurs-broker-lead-form .wpcf7 {
	margin: 0;
	width: 100%;
}

.kryptokurs-broker-form .wpcf7-form,
.wp-block-kryptokurs-broker-lead-form .wpcf7-form {
	display: grid;
	gap: 10px;
	width: 100%;
	margin: 0;
}

.kryptokurs-broker-form .wpcf7-form p,
.wp-block-kryptokurs-broker-lead-form .wpcf7-form p {
	margin: 0;
}

.kryptokurs-broker-form .wpcf7-form br,
.wp-block-kryptokurs-broker-lead-form .wpcf7-form br {
	display: none;
}

.kryptokurs-broker-form .kryptokurs-form-grid,
.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-grid,
.kryptokurs-broker-form .kryptokurs-cf7-grid,
.wp-block-kryptokurs-broker-lead-form .kryptokurs-cf7-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	width: 100%;
}

@media (min-width: 640px) {
	.kryptokurs-broker-form .kryptokurs-form-grid,
	.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-grid {
		grid-template-columns: 1fr 1fr;
	}

	.kryptokurs-broker-form .kryptokurs-form-field--full,
	.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-field--full,
	.kryptokurs-broker-form .kryptokurs-form-field--phone,
	.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-field--phone {
		grid-column: 1 / -1;
	}
}

.kryptokurs-broker-form .kryptokurs-form-field,
.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-field {
	display: grid;
	gap: 5px;
	min-width: 0;
	margin: 0;
}

.kryptokurs-broker-form .kryptokurs-form-field > label,
.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-field > label,
.kryptokurs-broker-form .wpcf7 label,
.wp-block-kryptokurs-broker-lead-form .wpcf7 label {
	display: grid;
	gap: 5px;
	margin: 0;
	color: var(--kryptokurs-text);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.25;
}

.kryptokurs-broker-form .wpcf7-form-control-wrap,
.wp-block-kryptokurs-broker-lead-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin: 0;
}

.kryptokurs-broker-form input[type="text"],
.kryptokurs-broker-form input[type="email"],
.kryptokurs-broker-form input[type="tel"],
.kryptokurs-broker-form input[type="url"],
.kryptokurs-broker-form textarea,
.kryptokurs-broker-form select,
.wp-block-kryptokurs-broker-lead-form input[type="text"],
.wp-block-kryptokurs-broker-lead-form input[type="email"],
.wp-block-kryptokurs-broker-lead-form input[type="tel"],
.wp-block-kryptokurs-broker-lead-form input[type="url"],
.wp-block-kryptokurs-broker-lead-form textarea,
.wp-block-kryptokurs-broker-lead-form select {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	height: 42px;
	min-height: 42px;
	padding: 0 12px;
	margin: 0;
	border: 1px solid var(--kryptokurs-border);
	border-radius: 8px;
	color: var(--kryptokurs-text);
	background: var(--kryptokurs-surface, var(--kryptokurs-white));
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
}

.kryptokurs-broker-form textarea,
.wp-block-kryptokurs-broker-lead-form textarea {
	height: auto;
	min-height: 9rem;
	padding-top: 10px;
	padding-bottom: 10px;
	resize: vertical;
}

.kryptokurs-broker-form input:focus,
.kryptokurs-broker-form textarea:focus,
.kryptokurs-broker-form select:focus,
.wp-block-kryptokurs-broker-lead-form input:focus {
	border-color: var(--kryptokurs-accent, var(--kryptokurs-action));
	outline: 3px solid color-mix(in srgb, var(--kryptokurs-accent, var(--kryptokurs-action)) 18%, transparent);
	outline-offset: 1px;
}

.kryptokurs-broker-form input:-webkit-autofill,
.wp-block-kryptokurs-broker-lead-form input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 42px var(--kryptokurs-surface, #fff) inset;
	-webkit-text-fill-color: var(--kryptokurs-text);
}

.kryptokurs-broker-form input.wpcf7-not-valid,
.wp-block-kryptokurs-broker-lead-form input.wpcf7-not-valid {
	border-color: var(--kryptokurs-negative);
}

.kryptokurs-broker-form .wpcf7-not-valid-tip,
.wp-block-kryptokurs-broker-lead-form .wpcf7-not-valid-tip {
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.25;
	color: var(--kryptokurs-negative);
	font-weight: 500;
}

/* Phone prefix with Swedish flag */
.kryptokurs-phone-control {
	position: relative;
	width: 100%;
}

.kryptokurs-phone-prefix {
	position: absolute;
	z-index: 2;
	left: 11px;
	top: 50%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transform: translateY(-50%);
	color: var(--kryptokurs-text);
	font-size: 13px;
	font-weight: 650;
	pointer-events: none;
}

.kryptokurs-phone-prefix img {
	display: block;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	object-fit: cover;
}

.kryptokurs-phone-control input[type="tel"],
.kryptokurs-broker-form .kryptokurs-phone-control input[type="tel"],
.wp-block-kryptokurs-broker-lead-form .kryptokurs-phone-control input[type="tel"] {
	padding-left: 76px;
}

.kryptokurs-broker-form .kryptokurs-form-consent,
.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-consent,
.kryptokurs-broker-form .wpcf7-acceptance,
.wp-block-kryptokurs-broker-lead-form .wpcf7-acceptance {
	margin: 2px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--kryptokurs-text);
	width: 100%;
}

.kryptokurs-broker-form .kryptokurs-form-consent .wpcf7-list-item,
.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-consent .wpcf7-list-item {
	margin: 0;
}

.kryptokurs-broker-form .kryptokurs-form-consent label,
.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-consent label,
.kryptokurs-broker-form .wpcf7-acceptance label,
.wp-block-kryptokurs-broker-lead-form .wpcf7-acceptance label {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	align-items: start;
	gap: 7px;
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
}

.kryptokurs-broker-form .wpcf7-acceptance input,
.wp-block-kryptokurs-broker-lead-form .wpcf7-acceptance input {
	width: 1rem;
	height: 1rem;
	margin: 0.1rem 0 0;
	flex-shrink: 0;
}

.kryptokurs-broker-form .kryptokurs-form-submit,
.wp-block-kryptokurs-broker-lead-form .kryptokurs-form-submit {
	margin: 8px 0 0;
	width: 100%;
}

.kryptokurs-broker-form input[type="submit"],
.wp-block-kryptokurs-broker-lead-form input[type="submit"],
.kryptokurs-broker-form .wpcf7 button,
.wp-block-kryptokurs-broker-lead-form .wpcf7 button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 43px;
	height: 43px;
	padding: 0 16px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: var(--kryptokurs-accent, var(--kryptokurs-action));
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.kryptokurs-broker-form input[type="submit"]:hover,
.wp-block-kryptokurs-broker-lead-form input[type="submit"]:hover {
	background: var(--kryptokurs-accent-hover, var(--kryptokurs-action-hover));
}

.kryptokurs-broker-form .wpcf7 .ajax-loader,
.wp-block-kryptokurs-broker-lead-form .wpcf7 .ajax-loader {
	margin-left: 0.5rem;
	vertical-align: middle;
}

.kryptokurs-broker-form .wpcf7-response-output,
.wp-block-kryptokurs-broker-lead-form .wpcf7-response-output {
	margin: 0.5rem 0 0;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	border-width: 1px;
	font-size: 12px;
}