.estimate-plugin-container {
	all: initial;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	box-sizing: border-box;
}

.estimate-plugin-container * {
	box-sizing: border-box;
}

.estimate-plugin-container .hcaptcha-placeholder{border:1px dashed #ccc;padding:12px;border-radius:4px;background:#fff;color:#333}
.estimate-plugin-container .card{max-width:900px;margin:0 auto;padding:0;border-radius:6px}
/* transparent form card when showing the form (no white background) */
.estimate-plugin-container .card.form-card{background:transparent;box-shadow:none}

.estimate-plugin-container .card:not(.form-card){background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.estimate-plugin-container .card.estimate-result { background: transparent !important; box-shadow: none !important; border: none !important; }
.estimate-plugin-container .card.estimate-result * { background: transparent !important; box-shadow: none !important; }

/* Force all visible text inside the card to black, except form field values */
.estimate-plugin-container .card h1, 
.estimate-plugin-container .card h2, 
.estimate-plugin-container .card h3, 
.estimate-plugin-container .card h4, 
.estimate-plugin-container .card h5, 
.estimate-plugin-container .card h6,
.estimate-plugin-container .card p, 
.estimate-plugin-container .card label, 
.estimate-plugin-container .card th, 
.estimate-plugin-container .card td, 
.estimate-plugin-container .card div, 
.estimate-plugin-container .card span,
.estimate-plugin-container .card li, 
.estimate-plugin-container .card a, 
.estimate-plugin-container .card strong, 
.estimate-plugin-container .card em {
	color: #000;
}
/* Keep form control text default (do not override input/select/textarea) */
.estimate-plugin-container .card input, 
.estimate-plugin-container .card select, 
.estimate-plugin-container .card textarea, 
.estimate-plugin-container .card option { 
	color: initial;
}

.estimate-plugin-container .row{display:flex;gap:16px;flex-wrap:wrap}
.estimate-plugin-container .col{flex:1 1 calc(50% - 8px);min-width:0}
.estimate-plugin-container label{display:block;margin-bottom:6px;font-weight:600}
.estimate-plugin-container input[type=text],
.estimate-plugin-container input[type=email],
.estimate-plugin-container input[type=tel],
.estimate-plugin-container input[type=number],
.estimate-plugin-container select,
.estimate-plugin-container textarea{
	width:100%;
	padding:8px;
	border:1.5px solid #000;
	border-radius:4px;
	font-size: 13px;
}
.estimate-plugin-container .controls{display:flex;gap:12px;flex-wrap:wrap}
.estimate-plugin-container .checkbox,
.estimate-plugin-container label.radio{display:flex;gap:8px;align-items:center}
.estimate-plugin-container button{color:#fff;padding:10px 18px;border:none;border-radius:4px;cursor:pointer}
.estimate-plugin-container button[type=submit] {
	background: #2B4D8A;
	color: #fff;
	width: 100%;
	transition: background 0.2s, box-shadow 0.2s;
	border: 1.5px solid #2B4D8A;
	outline: none;
	box-shadow: none;
}
.estimate-plugin-container button[type=submit]:hover,
.estimate-plugin-container button[type=submit]:focus {
	background: #1d335a;
	color: #fff;
	box-shadow: 0 2px 8px rgba(43,77,138,0.15);
}

.estimate-plugin-container button[type=submit].submitting {
	background: #5f7ca7;
	border-color: #5f7ca7;
	opacity: 0.68;
	color: #fff;
	cursor: wait;
	animation: submit-loading-pulse 1.4s ease-in-out infinite;
}

@keyframes submit-loading-pulse {
	0%, 100% { opacity: 0.68; }
	50% { opacity: 0.92; }
}

/* Ensure textarea text matches other form controls */
.estimate-plugin-container .card textarea {
    font-size: 13px;
    line-height: 1.4;
    font-family: inherit;
}

/* Match user and storage field heights to other form fields */
.estimate-plugin-container #form-field-user, 
.estimate-plugin-container #form-field-storage, 
.estimate-plugin-container #form-field-storage-lcconnect {
    height: 36.64px;
    box-sizing: border-box;
}

/* Style invalid form inputs */
.estimate-plugin-container input:invalid, 
.estimate-plugin-container select:invalid, 
.estimate-plugin-container textarea:invalid {
	border-color: #2B4D8A;
	color: #2B4D8A;
}

.estimate-plugin-container input:invalid::placeholder {
	color: #2B4D8A;
}

/* Custom dropdown styles with raindrop animation support */
.estimate-plugin-container .storage-group {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow: visible;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.estimate-plugin-container .custom-dropdown {
	position: relative;
	flex: 0;
	min-width: 0;
	opacity: 0;
	transform: translateX(0) scaleX(0);
	transform-origin: left center;
	border-radius: 4px;
	transition: flex 0.3s ease,
	            opacity 0.3s ease 0.1s,
	            transform 0.3s ease,
	            border-radius 0.3s ease;
	background: #fff;
	z-index: 10;
}

.estimate-plugin-container .custom-dropdown.visible {
	flex: 1;
	opacity: 1;
	transform: translateX(0) scaleX(1);
	border-radius: 4px;
}

.estimate-plugin-container .custom-dropdown.half {
	flex: 0.5;
	opacity: 1;
	transform: translateX(0) scaleX(1);
	border-radius: 4px;
	transition: flex 0.3s ease,
	            opacity 0.3s ease,
	            transform 0.3s ease,
	            border-radius 0.3s ease;
}

.estimate-plugin-container .custom-dropdown-label {
	position: absolute;
	top: -11px;
	left: 0;
	font-size: 9px;
	color: #888;
	font-weight: 600;
	pointer-events: none;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
	z-index: 2;
}

.estimate-plugin-container .custom-dropdown.half > .custom-dropdown-label,
.estimate-plugin-container .custom-dropdown.visible.half > .custom-dropdown-label {
	opacity: 1;
	visibility: visible;
}

.estimate-plugin-container .custom-dropdown-button {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border: 1.5px solid #000;
	background: #fff;
	position: relative;
	z-index: 1;
	border-radius: inherit;
}

.estimate-plugin-container .custom-dropdown-menu {
	overflow-x: hidden;
}

.estimate-plugin-container .custom-dropdown-item {
}

/* WPML cleanup guard: hide floating translation UI stubs near estimate block */
.estimate-plugin-container .wpml-ate-jobs-sync-ui,
.estimate-plugin-container #wpml-ate-jobs-sync-ui-js,
.estimate-plugin-container #wpml-ate-jobs-sync-ui-js-translations,
.estimate-plugin-container .wpml-ate-jobs-sync-ui-iframe {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	max-height: 0 !important;
	max-width: 0 !important;
	overflow: hidden !important;
}

/* Additional table artifact guard */
.estimate-plugin-container thead,
.estimate-plugin-container tbody,
.estimate-plugin-container tfoot {
	display: contents !important;
}

.estimate-plugin-container table {
	border-collapse: collapse !important;
}

.estimate-plugin-container table tr th,
.estimate-plugin-container table tr td {
	border: 1px solid #ddd !important;
}

.estimate-plugin-container .custom-dropdown-item {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Smooth transition animations */
@keyframes smooth-shrink {
	0% {
		transform: translateX(0) scaleX(1);
	}
	100% {
		transform: translateX(-10px) scaleX(0.9);
	}
}

@keyframes smooth-appear {
	0% {
		transform: translateX(20px) scaleX(0.8);
		opacity: 0;
	}
	100% {
		transform: translateX(0) scaleX(1);
		opacity: 1;
	}
}

@keyframes smooth-disappear {
	0% {
		transform: translateX(0) scaleX(1);
		opacity: 1;
	}
	100% {
		transform: translateX(20px) scaleX(0.8);
		opacity: 0;
	}
}

.estimate-plugin-container .custom-dropdown.hiding {
	flex: 0;
	opacity: 0 !important;
	transform: translateX(20px) scaleX(0.8) !important;
}

.estimate-plugin-container .storage-group.hiding {
	opacity: 0;
	transform: translateY(-10px);
}

/* error indicator for invalid fields */
.estimate-plugin-container .error-border {
	border-color: #e00 !important;
}

/* Flashing animation for hCaptcha when invalid */
@keyframes flash-red {
	0%, 100% { border-left-color: #e00; }
	50% { border-left-color: transparent; }
}

.estimate-plugin-container .h-captcha {
	border-left: 2px solid transparent;
}

.estimate-plugin-container .h-captcha.h-captcha-error {
	animation: flash-red 0.5s 1; /* Flash once over 0.5 seconds */
}

.estimate-plugin-container .storage-group.appearing {
	opacity: 0;
	transform: translateY(-10px);
}