/*
 Theme Name:   MB Estate Realtors
 Description:  A child theme for Twenty Twenty-Five
 Template:     reland
 Version:      1.0.0
*/

/* ==========================================================================
   Contact Form 7 Custom Styling
   ========================================================================== */

/* --- Custom Radio Buttons (Buy, Sell, Rent) --- */
.contact-form-wrap .wpcf7-radio {
	display: flex;
	gap: 30px;
	margin-top: 10px;
	margin-bottom: 25px;
	flex-wrap: wrap;
}

.contact-form-wrap .wpcf7-radio .wpcf7-list-item {
	display: inline-flex;
	margin: 0;
	padding: 0;
}

.contact-form-wrap .wpcf7-radio .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin: 0;
	user-select: none;
}

.decision-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.decision-label {
	font-size: 20px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.decision-group .wpcf7-radio {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0; /* Overrides the existing margin-top/bottom */
}

.decision-group .wpcf7-list-item {
    margin: 0;
}

.decision-group .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Hide the native radio button visually while keeping it accessible */
.contact-form-wrap .wpcf7-radio input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Custom styled label container */
.contact-form-wrap .wpcf7-radio .wpcf7-list-item-label {
	position: relative;
	padding-right: 28px;
	padding-left: 0;
	font-weight: 500;
	font-size: 15px;
	color: var(--tg-secondary-color);
	display: inline-block;
	line-height: 20px;
	transition: color 0.25s ease;
}

/* Outer Circle of the custom radio */
.contact-form-wrap .wpcf7-radio .wpcf7-list-item-label::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--tg-secondary-color);
	border-radius: 50%;
	background-color: transparent;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* Inner Dot of the custom radio */
.contact-form-wrap .wpcf7-radio .wpcf7-list-item-label::after {
	content: "";
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%) scale(0);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--tg-primary-color);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover effect on outer circle */
.contact-form-wrap .wpcf7-radio .wpcf7-list-item label:hover .wpcf7-list-item-label::before {
	border-color: var(--tg-primary-color);
}

/* Checked state styling */
.contact-form-wrap .wpcf7-radio .wpcf7-list-item label:has(input[type="radio"]:checked) .wpcf7-list-item-label::before,
.contact-form-wrap .wpcf7-radio .wpcf7-list-item input[type="radio"]:checked ~ .wpcf7-list-item-label::before {
	border-color: var(--tg-primary-color);
}

.contact-form-wrap .wpcf7-radio .wpcf7-list-item label:has(input[type="radio"]:checked) .wpcf7-list-item-label::after,
.contact-form-wrap .wpcf7-radio .wpcf7-list-item input[type="radio"]:checked ~ .wpcf7-list-item-label::after {
	transform: translateY(-50%) scale(1);
}

.contact-form-wrap .wpcf7-radio .wpcf7-list-item label:has(input[type="radio"]:checked) .wpcf7-list-item-label,
.contact-form-wrap .wpcf7-radio .wpcf7-list-item input[type="radio"]:checked ~ .wpcf7-list-item-label {
	color: var(--tg-primary-color);
}

/* --- Area Selector Dropdown --- */
.contact-form-wrap .form-grp select.wpcf7-select {
	width: 100%;
	background-color: transparent;
	border: 1.5px solid var(--tg-secondary-color);
	border-radius: 8px;
	padding: 13px 24px;
	font-weight: 400;
	font-size: 15px;
	color: var(--tg-secondary-color);
	height: 56px;
	display: block;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 16px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Options dropdown matching page background */
.contact-form-wrap .form-grp select.wpcf7-select option {
	background-color: #f7f6f2; /* Matches the theme's cream background */
	color: var(--tg-secondary-color);
	padding: 10px;
}

/* Hover & Focus states for select and other fields */
.contact-form-wrap .form-grp select.wpcf7-select:focus,
.contact-form-wrap .form-grp input:focus,
.contact-form-wrap .form-grp textarea:focus {
	border-color: var(--tg-primary-color);
	box-shadow: 0 0 0 3px rgba(189, 154, 104, 0.15); /* Subtle primary-colored shadow */
	outline: none;
}