/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

:root {
	--tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
	--ico-profile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#fff' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
	--ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#fff' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E")
	--ico-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#fff' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
	--ico-profile-dark: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#000' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E";
	--ico-phone-dark: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#000' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E";
	--ico-email-dark: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#000' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E";
}

body {
	&:is(.page-contact-us) {
		background-color: rgb(250 249 251 / 1);
	}
}

.form-wrapper {
	& > * {
		& > * {
			width: min(320px, 100%) !important;
			background: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(10px);
			border-radius: 20px;
			padding: 30px !important;
			border: 1px solid rgba(255, 255, 255, 0.2);
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
			color: #fff;
			gap 1em !important;
		}
	}
}

.ninja-forms-form-wrap {
	--base-color: rgb(255, 255, 255);

	.nf-form-fields-required {
		display: none;
	}

	nf-fields-wrap {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 1em;

		* {
			font-family: "Mukta", Sans-serif;
		}

		.form-container {
			margin: 0;

			.field-wrap {
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				align-items: stretch;
				justify-content: flex-start;
				gap: 0.5em;

				.nf-field-label {
					margin: 0;
					line-height: 1em;
					
					&:empty {
						display: none;
					}
				}

				.nf-field-element {
					transform: scale(1);
					transition: transform 0.3s ease;
					will-change: transform;

					&:has(input:focus) {
						transform: scale(1.02);
					}

					input,
					textarea {
						font-size: 1rem;
						border-radius: 1em;
						padding: 0.5em 1em;
						color: var(--base-color);
						transition: all 0.3s ease;

						&:not([type="submit"]) {
							width: max(250px, 100%);
							background: color(from var(--base-color) srgb r g b / 0.1);
							border: 2px solid color(from var(--base-color) srgb r g b / 0.2);
							display: block;
							&:focus {
								outline: none;
								border-color: color(from var(--base-color) srgb r g b / 0.8);
								background: color(from var(--base-color) srgb r g b / 0.2);
								transform: translateY(-2px);
								box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
							}
							
							@media (width < 48rem) {
								width: max(150px, 100%);
							}
						}

						&[type="submit"] {
							width: 100%;
							border: none;
							font-weight: bold;
							text-transform: uppercase;
							letter-spacing: 1px;
							background: #7c309c;
							color: #ffffff;

							&:not(:disabled) {
								cursor: pointer;

								&:hover,
								&:focus {
									background: color-mix(in srgb, #7c309c 85%, #ffffff 15%);
								}	
							}
						}
						
					}
				}
			}
		}
	}
}

.alt-form {
	.ninja-forms-form-wrap {
		--base-color: rgb(0, 0, 0);
	}
}

.form-elem {
/* 	left: 65%;
	top: 50%;
	transform: translate(-50%, -50%); */

	.has-left-caret::before {
		content: '';
		width: 30px;
		height: 50px;
		aspect-ratio: 1;
		position: absolute;
		left: unset;
		right: calc(100% - 1px);
		background: #fff;
		top: 50%;
		z-index: 1;
		clip-path: polygon(100% 0, 0 50%, 100% 100%);
		transform: translateY(-50%);
	}
}

@media (width <48rem) {
	.form-elem {
		.has-left-caret::before {
			top: unset;
			left: 50%;
			bottom: 99%;
			clip-path: polygon(50% 0, 0 100%, 100% 100%);
			width: 50px;
			height: 30px;
			transform: translateX(-50%);
		}
	}
}

#commentform {
    .submit {
        background: linear-gradient(135deg, #653490 0%, #4a2568 100%);
        color: #fff;
        border: none;
        padding: 1rem 2rem;
        border-radius: 4px;
        box-shadow: 0 4px 15px rgba(101, 52, 144, 0.3);
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        will-change: transform;
        contain: layout style paint;
        
        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(101, 52, 144, 0.4);
        }
    }
}

.contact-container {
	& > * {
		--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
		border-radius: 0.75em;
		overflow: hidden;
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	}
	
	p {
		margin: 0;
	}
	
	.ninja-forms-form-wrap {
		nf-fields-wrap {
			.form-container {
				.field-wrap {
					.nf-field-element {
						input,
						textarea {
							&:not([type="submit"]) {
								--base-color: rgb(22 16 25 / 1);
							}
						}
					}
				}
			}
		}
	}
}

[id^=isp-lead-] *:where(strong, a, button) {
    cursor: pointer;
}