/* Base styles from original style.css */
body {
	margin:  0;
}
.page-content {
	width: 100%;
	margin:  0 auto;
	background: #EAEAED; /* UPDATED: Set overall background color */
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-o-justify-content: center;
	-ms-justify-content: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-o-align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
}
.form-v4-content  {
	background: #fff;
	max-width: 850px;
	width: 100%;
	border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-ms-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
	margin: 175px 0;
	position: relative;
	display: flex;
	display: -webkit-flex;
	font-family: 'Open Sans', sans-serif;
}
.form-v4-content h2 {
	font-weight: 700;
	font-size: 30px;
	padding: 6px 0 0;
	margin-bottom: 34px;
}
.form-v4-content .form-left {
	background: #1481CD; /* UPDATED: Information background color */
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 20px 40px;
	position: relative;
	width: 30%; /* UPDATED: Decreased width of information section */
	color: #fff;
	box-sizing: border-box;
}
.form-v4-content .form-left p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
}
.form-v4-content .form-left span {
	font-weight: 700;
}
.form-v4-content .form-left .text-2 {
	margin: 20px 0 25px;
}

/* --- New Styles for the Sign-up Form Content --- */

/* Right Form Panel Styles */
.form-right {
    padding: 20px 40px;
    position: relative;
    width: 70%; /* UPDATED: Increased width of form section */
    color: #333; /* Darker text for fields */
    box-sizing: border-box;
    font-family: 'Inter', sans-serif; /* Use Inter for the actual form content */
}
.form-v4-content .form-detail .form-row {
    margin-bottom: 25px;
}
/* Two-Column Grouping */
.form-v4-content .form-detail .form-row-group {
    display: flex;
    gap: 30px; /* Space between the two columns */
}
.form-v4-content .form-detail .form-row-group .form-row {
    flex: 1;
    margin-bottom: 25px;
}

/* Input/Select/Label Styles */
.form-v4-content .form-detail label {
    font-size: 15px;
    font-weight: 700; /* Bold label to match index.html feel */
    margin-bottom: 6px;
    color: #333;
    display: block;
}
.form-v4-content .form-detail input[type="text"],
.form-v4-content .form-detail input[type="email"],
.form-v4-content .form-detail input[type="tel"],
.form-v4-content .form-detail select {
    display: block;
	height: 48px; 
    padding: 0 15px;
    font-size: 15px;
	font-family: 'Inter', sans-serif;
    color: #333;
    background: #FFFFFF;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}
.form-v4-content .form-detail input:focus,
.form-v4-content .form-detail select:focus {
    outline: none;
    border-color: #3786bd; /* Focus color from index.html's button primary */
    box-shadow: 0 0 0 1px #3786bd;
}

/* Select Arrow Styling (from signup-html.txt) */
.form-v4-content .form-detail select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 1.6em 1.6em;
    padding-right: 3.2rem;
}

/* Email/OTP Section Layout */
.email-otp-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Buttons (Base style adapted from index.html's button aesthetic) */
.button {
    height: 48px;
    line-height: 48px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	border: none;
    padding: 0 20px;
	cursor: pointer;
	color: #fff;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* PRIMARY: Submit Enquiry (Based on .register in style.css) */
.button.register {
    background: #3786bd;
}
.button.register:hover {
    background: #2f73a3;
}

/* OTP Button Sizing */
.button.button-otp {
    flex-shrink: 0;
    width: 130px; 
    line-height: normal; /* Override line-height for better text centering with flex */
}

/* TERTIARY: Send OTP (Stroke/Outline) */
.button.stroke {
    background: #fff;
    color: #3786bd;
    border: 1px solid #3786bd;
}
.button.stroke:hover {
    background: #deebff; /* Light blue hover background */
    color: #2f73a3;
}

/* SECONDARY: Verify OTP (Light Fill) */
.button.button-secondary {
    background: #deebff;
    color: #3786bd;
}
.button.button-secondary:hover {
    background: #c3d9ff;
    color: #2f73a3;
}

/* Disabled state */
.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Utility/Feedback Styles (from signup-html.txt) --- */
.hidden { display: none !important; }

/* Feedback boxes (adapted colors) */
.success-box, .error-box {
    border: 1px solid;
    padding: 14px 16px;
    border-radius: 5px; 
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.5;
}
.success-box {
    background: #f0fdf4; 
    border-color: #bbf7d0;
    color: #166534; 
}
.error-box {
    background: #fef2f2; 
    border-color: #fecaca;
    color: #991b1b; 
}
.muted {
    opacity: .75;
    font-size: 13px;
    display: block;
}

/* Field-Specific Errors */
.field-error {
    display: block;
    font-size: 13px;
    color: #991b1b;
    margin-top: 4px;
    line-height: 1.3;
}

/* Spinner animation for buttons */
.spinner {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: .8rem;
    vertical-align: middle;
}
/* Spinner for non-primary buttons */
.button:not(.register) .spinner {
    border-top-color: #3786bd;
    border-color: rgba(55, 134, 189, 0.3);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Segmented Control (UI Toggles) */
.segmented-control {
    display: flex;
    background-color: #f1f1f1; 
    border-radius: 5px;
    padding: 3px;
}
.segmented-control input[type="radio"] {
    display: none;
}
.segmented-control label {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #666; 
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
    line-height: 1.5;
}
/* Selected state */
.segmented-control input[type="radio"]:checked + label {
    background-color: #3786bd;
    box-shadow: none;
    color: #fff;
}

/* Responsive adjustments from style.css */
@media screen and (max-width: 991px) {
    /* Let the page scroll and give breathing room on top/bottom */
    .page-content {
        align-items: flex-start;
        padding: 40px 16px;
    }

    .form-v4-content {
        margin: 40px 16px;
        flex-direction: column;
        width: 100%;
    }

    .form-v4-content .form-left {
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
        width: 100%;
    }

    .form-right {
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        width: 100%;
    }

    /* Stack the two-column groups into a single column */
    .form-v4-content .form-detail .form-row-group {
        flex-direction: column;
        gap: 16px;
    }
}

@media screen and (max-width: 600px) {
    .form-v4-content {
        margin: 24px 12px;
    }

    /* Logo + heading a bit smaller so they fit nicely */
    .logo-container img {
        max-width: 220px;
        height: auto;
    }

    .section-intro h1 {
        font-size: 24px;
    }

    /* Email + OTP buttons stack vertically */
    .email-otp-group {
        flex-direction: column;
        align-items: stretch;
    }

    .button.button-otp {
        width: 100%;
    }
}