/* Miror HRT Journey Form Styles v1.2 */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Montserrat:wght@500;600;700&display=swap');

.mhj-section {
    /* Precise gradient from your Figma reference */
    background: linear-gradient(180deg, #186E8E 0%, #6DC6B3 100%);
    padding: 80px 20px;
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.mhj-content-wrap,
.mhj-form-wrap {
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
}

/* --- Top Informational Section --- */
.mhj-top-heading {
    font-family: 'Lora', serif;
    color: #fff;
    font-size: 44px;
    line-height: 1.3;
    font-weight: 700;
    max-width: 800px;
    margin: 0 auto 50px;
}

.mhj-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 70px;
}

.mhj-feature-box {
    background: #fff;
    color: #186E8E;
    padding: 30px 25px;
    border-radius: 12px;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	position:relative;
}
.mhj-feature-box p{
    color: #01416F;
}
.mhj-feature-step {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #6DC6B3;
    margin-bottom: 8px;
	 position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #6DC6B3;
    padding: 10px 18px!important;
    border-radius: 10px;
    color: white;
    display: inline-block;
    white-space: nowrap;
}
.mhj-feature-box p {
    margin: 0;
    font-size: 18px;
}

/* --- Form Section --- */
.mhj-title {
    color: #fff;
    font-size: 42px;
    line-height: 1.2;
    margin: 0 0 30px;
    font-weight: 700;
}

.mhj-form { display: block; }

.mhj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

.mhj-field input {
    width: 100%;
    padding: 16px 18px;
    border-radius: 8px;
    border: 2px solid transparent;
    outline: none;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: #222;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.mhj-field input::placeholder { color: #888; }

.mhj-options {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    margin: 12px 0 0;
    flex-wrap: wrap;
}

/* --- Custom Checkbox Styling --- */
.mhj-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 12px 10px;
}
.mhj-checkbox-label input[type="checkbox"] { display: none; }
.mhj-checkbox-label .custom-checkbox {
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.mhj-checkbox-label .custom-checkbox::after {
    content: ''; display: block; width: 6px; height: 12px;
    border: solid white; border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0); transition: transform 0.2s;
}
.mhj-checkbox-label input[type="checkbox"]:checked + .custom-checkbox { background-color: #34c759; }
.mhj-checkbox-label input[type="checkbox"]:checked + .custom-checkbox::after { transform: rotate(45deg) scale(1); }

.mhj-btn {
    background: #d92a7f; color: #fff; border: none; border-radius: 8px;
    padding: 16px 32px; font-size: 18px; font-weight: 700; cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: transform 0.2s;
}
.mhj-btn:hover { transform: translateY(-2px); }
.mhj-btn[disabled] { opacity: .7; cursor: not-allowed; }

.mhj-msg {
    margin-top: 20px; font-weight: 600; padding: 12px;
    border-radius: 8px; display: inline-block;
}
.mhj-msg.success { background: #e6fff5; color: #044a3b; }
.mhj-msg.error { background: #ffecec; color: #8a0d0d; }
.mhj-field input.is-invalid { border-color: #d92a7f; }
.mhj-help { display: block; color: #fff; font-size: 13px; text-align: left; margin-top: 6px; }

/* --- Responsive adjustments --- */
@media(max-width: 980px) {
    .mhj-features-grid, .mhj-grid { grid-template-columns: 1fr; }
    .mhj-top-heading { font-size: 36px; }
}
@media(max-width: 768px) {
    .mhj-section { padding: 60px 20px; }
    .mhj-top-heading { font-size: 28px; }
    .mhj-title { font-size: 32px; }
    .mhj-options { flex-direction: column; gap: 15px; align-items: stretch; }
    .mhj-btn { width: 100%; padding: 18px; }
}

@media (max-width: 768px) {
    .mhj-feature-box {
       margin:15px 15px;
    }
	.mhj-options {
    display: block!important;
}
	.mhj-btn{
		padding:6px!important;
	}
}