/**
 * Custom Gravity Forms Fields Styles
 */

/* ============================================
   Image Upload Field - Exact Design Match
   ============================================ */

.ginput_container_imageupload {
	width: 100%;
}

.wf-gforms-imageupload-wrapper {
	width: 100%;
	padding-top: 20px;
}

.wf-gforms-imageupload-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
}

/* Preview - Left Side */
.wf-gforms-imageupload-preview {
	width: 100px !important;
	height: 100px !important;
	min-width: 100px !important;
	flex-shrink: 0 !important;
	position: relative;
}

.gform_wrapper .wf-gforms-imageupload-preview-img,
.gform_wrapper .wf-gforms-imageupload-preview img,
body .gform_wrapper .wf-gforms-imageupload-preview-img,
html body .gform_wrapper .wf-gforms-imageupload-preview-img {
	all: revert !important;
	width: 100px !important;
	height: 100px !important;
	min-width: 100px !important;
	min-height: 100px !important;
	max-width: 100px !important;
	max-height: 100px !important;
	object-fit: cover !important;
	border-radius: 5px !important;
	display: block !important;
}

/* Placeholder Box */
.wf-gforms-imageupload-placeholder {
	width: 100px !important;
	height: 100px !important;
	background: #E2E6EC !important;
	border-radius: 5px !important;
	position: relative !important;
	display: block !important;
}

.wf-gforms-imageupload-placeholder-icon {
	width: 42.67px;
	height: 35.33px;
	position: absolute;
	left: 28.67px;
	top: 32.67px;
	background: #B2B9C4;
}

.wf-gforms-imageupload-placeholder-circle {
	width: 8.67px;
	height: 8.67px;
	position: absolute;
	left: 34.33px;
	top: 37.67px;
	background: #B2B9C4;
	border-radius: 9999px;
}

.wf-gforms-imageupload-placeholder-rect {
	width: 32px;
	height: 19.67px;
	position: absolute;
	left: 34.33px;
	top: 42.33px;
	background: #B2B9C4;
	border-radius: 1.67px;
}

/* Content - Right Side */
.wf-gforms-imageupload-content {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

/* Description Text */
.wf-gforms-imageupload-description {
	color: #000000;
	font-size: 10px;
	font-family: 'Mulish', sans-serif;
	font-weight: 400;
	line-height: 22px;
	white-space: nowrap !important;
}

/* Controls Box */
.wf-gforms-imageupload-controls {
	padding: 10px !important;
	background: #FFFFFF !important;
	border-radius: 10px !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	display: flex !important;
	align-items: center !important;
	gap: 30px !important;
}

.wf-gforms-imageupload-controls.has-image {
	justify-content: space-between !important;
}

/* Button + Filename Wrapper */
.wf-gforms-imageupload-button-wrapper {
	display: flex !important;
	align-items: center !important;
	gap: 30px !important;
}

/* Green Button */
.wf-gforms-imageupload-button {
	height: 32px !important;
	padding: 10px 20px !important;
	border-radius: 55px !important;
	border: 1px solid #10B981 !important;
	background: transparent !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
}

.wf-gforms-imageupload-button:hover {
	background: rgba(16, 185, 129, 0.1) !important;
}

.wf-gforms-imageupload-button span {
	color: #10B981 !important;
	font-size: 14px !important;
	font-family: 'Mulish', sans-serif !important;
	font-weight: 600 !important;
	line-height: 21px !important;
}

/* Filename Text */
.wf-gforms-imageupload-filename {
	color: #3C3C3C !important;
	font-size: 14px !important;
	font-family: 'Mulish', sans-serif !important;
	font-weight: 600 !important;
	line-height: 21px !important;
}

/* Red Remove Button - X icon */
.wf-gforms-imageupload-remove {
	width: 16px !important;
	height: 16px !important;
	cursor: pointer !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

.gform_wrapper .wf-gforms-imageupload-remove-icon,
body .gform_wrapper .wf-gforms-imageupload-remove-icon,
html body .gform_wrapper .wf-gforms-imageupload-remove-icon {
	all: revert !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	display: block !important;
	background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.07695 2C6.31787 2 5.69234 2.58085 5.69234 3.28571V3.71429H3.38464H2.46155C2.20664 3.71429 2 3.90617 2 4.14287C2 4.37956 2.20664 4.57145 2.46155 4.57145H2.94651L3.35758 11.8798C3.42232 13.0307 4.39349 14 5.66437 14H10.3077C11.5786 14 12.5457 13.0296 12.6145 11.8806L13.0517 4.57142H13.5385C13.7934 4.57142 14 4.37954 14 4.14284C14 3.90615 13.7934 3.71427 13.5385 3.71427H12.6154H10.3077V3.28571C10.3077 2.58085 9.68218 2 8.92308 2H7.07695ZM7.07695 2.85713H8.9231C9.18676 2.85713 9.38465 3.04086 9.38465 3.28571V3.71429H6.6154V3.28571C6.6154 3.04088 6.81326 2.85713 7.07695 2.85713ZM6.6154 6.28571C6.87031 6.28571 7.07695 6.47759 7.07695 6.71429V11C7.07695 11.2367 6.87031 11.4286 6.6154 11.4286C6.3605 11.4286 6.15386 11.2367 6.15386 11V6.71429C6.15386 6.47759 6.3605 6.28571 6.6154 6.28571ZM9.38462 6.28571C9.63953 6.28571 9.84617 6.47759 9.84617 6.71429V11C9.84617 11.2367 9.63953 11.4286 9.38462 11.4286C9.12972 11.4286 8.92308 11.2367 8.92308 11V6.71429C8.92308 6.47759 9.12972 6.28571 9.38462 6.28571Z" fill="%23C12029"/></svg>') !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.gform_wrapper .wf-gforms-imageupload-remove-icon svg,
body .gform_wrapper .wf-gforms-imageupload-remove-icon svg,
html body .gform_wrapper .wf-gforms-imageupload-remove-icon svg {
	display: none !important;
}

/* Error */
.wf-gforms-imageupload-error {
	color: #C12029 !important;
	font-size: 12px !important;
	padding: 8px 12px !important;
	background: #FEE2E2 !important;
	border-radius: 5px !important;
	margin-top: 8px !important;
}

/* Loading */
.wf-gforms-imageupload-loading {
	color: #1C1C84 !important;
	font-size: 14px !important;
	margin-top: 8px !important;
}

/* Hide native file input but keep it functional */
.wf-gforms-imageupload-native-input {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.wf-gforms-imageupload-native-input input[type="file"] {
	position: absolute !important;
	left: -9999px !important;
}

/* Make label look like a button */
label.wf-gforms-imageupload-button {
	cursor: pointer !important;
}

/* ============================================
   Rich Text Editor
   ============================================ */

.wf-gforms-richtext-wrapper {
	width: 100%;
}

.wf-gforms-richtext-wrapper textarea.wf-gforms-richtext {
	width: 100%;
	min-height: 200px;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 15px;
	font-size: 14px;
}

.wf-gforms-richtext-wrapper .mce-tinymce {
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	border-radius: 10px !important;
	overflow: hidden;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 600px) {
	.wf-gforms-imageupload-inner {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	
	.wf-gforms-imageupload-controls {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 15px !important;
	}
	
	.wf-gforms-imageupload-button-wrapper {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
	}
}