/* css/register_style.css - Custom Styles for the Registration Page */
main{
    width:80vw; 
    margin:0 auto; 
    background-color: #eeedf2;
}

/* Hero Section specific to Registration Page */
.register-hero-section {
    position: relative;
    width: 100%;
    height: 225px;
    background-image: url('../images/with text 2.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin: -31px 0 0 0 !important;
    padding: 0;
}

/* Ensure the main content starts right after the hero section, clearing the hero's height */
main {
    margin-top: 0; /* Override any default margin-top if present */
}

/* Registration Form Section */
.registration-form-section {
    padding-top: 30px;
    padding-bottom: 50px;
}

.registration-card {
    background-color: #fff; /* Overall white background for the card */
    border: 1px solid #ddd;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Crucial to make rounded corners apply cleanly and hide internal overflows */
    /* padding: 0 !important;  */
}

.form-title {
    color: #333;
    font-weight: 600;
    text-align: center; /* Center the title */
    margin-bottom: 30px; /* More space below the title */
    padding-top: 20px; /* Padding for the title inside the card */
    padding-left: 15px; /* Add horizontal padding to title */
    padding-right: 15px; /* Add horizontal padding to title */
}

/* New style for sub-titles within the form (e.g., "Retailer Business Card Details") */
.form-subtitle {
    color: #f51128; /* Red color for sub-titles */
    font-weight: 600;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f51128; /* A subtle line below the subtitle */
    padding-left: 15px;
    padding-right: 15px;
}


.form-row-custom {
    display: flex; /* Use flexbox for the row to align columns (label and input) */
    align-items: stretch; /* Make label and input columns stretch to equal height */
    margin-bottom: 0; /* Remove default margin-bottom from Bootstrap rows */
    border-bottom: 1px solid #eee; /* Add subtle separator lines between rows within the card */
}

/* Remove bottom border for the last form row before the submit button */
.form-row-custom:last-of-type { /* Use last-of-type to target the last .form-row-custom before the submit button div */
    border-bottom: none;
}

/* Styling for the label column (left side of each row) */
.form-label-custom {
    font-weight: bold; /* LABELS ARE NOW BOLD */
    color: #333; /* Dark text for better contrast on yellow background */
    background-color: #ffcc00; /* Solid yellow background for the label section */
    text-align: left; /* LABELS ARE NOW ALIGNED TO THE LEFT */
    padding: 1rem 15px; /* Ample padding to create the yellow block effect */
    padding-left: 25px; /* ADDED MORE PADDING FROM THE LEFT */
    display: flex; /* Use flexbox to vertically center label text */
    align-items: center; /* Center label text vertically */
    justify-content: flex-start; /* Align label text to the left */
    height: 100%; /* Ensure label background fills its column height */
    box-shadow: none; /* Remove any subtle shadow */
    margin-right: 0; /* Remove extra margin */
    flex-shrink: 0; /* Prevent the label from shrinking below its content */
    font-size: 0.9rem; /* Smaller font for labels */
}

/* Ensure no gap between the label (col-sm-5) and the input (col-sm-7) */
.form-row-custom .col-sm-5 {
    padding-right: 0;
}

.form-row-custom .col-sm-7 {
    padding-left: 0;
    background-color: #fff; /* Explicitly set white background for input side of the cell */
}


/* Styling for the input/select fields */
.form-control-custom,
.form-select-custom {
    border-radius: 0; /* Remove rounded corners, as the card handles overall rounding */
    border: none; /* Remove default border, as row dividers define cells */
    padding: 1rem 15px; /* Match vertical padding of labels for consistent row height */
    font-size: 0.9rem; /* SMALLER FONT FOR INPUTS */
    color: #333;
    width: 100%; /* Ensure it takes full width of its column */
    background-color: transparent; /* Keep background transparent to show the white column background */
}

.form-control-custom:focus,
.form-select-custom:focus {
    border-color: transparent; /* Remove border on focus */
    box-shadow: none; /* Remove glow on focus, the yellow label background is enough visual cue */
    outline: none; /* Remove default outline */
}

.required-star {
    color: #dc3545; /* Red color for required star */
    margin-left: 5px;
}

.submit-button {
    background-color: #ffcc00; /* Yellow button color */
    border-color: #ffcc00;
    color: #333; /* Dark text for button */
    padding-top:10px;
    padding-bottom:10px; /* Larger padding for a more prominent button */
    font-size: 1.2rem;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.submit-button:hover {
    background-color: #e6b800; /* Darker yellow on hover */
    border-color: #e6b800;
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    color: #333;
}




.registration-confirmation-section .registration-card {
    background-color: #eef; /* Slightly lighter background for confirmation card */
    border-color: #ccf;
}

.registration-confirmation-section .text-danger {
    color: #dc3545; /* Red for "REGISTRATION CONFIRMED!" */
}

.registration-confirmation-section .text-success {
    color: #28a745; /* Green for confirmation number */
}

.registration-summary-section .registration-card {
    background-color: #fff; /* White background for summary card */
    border-color: #ddd;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.registration-summary-section {
    margin-bottom: 50px;
}

.registration-details-row {
    margin-bottom: 10px; /* Spacing between summary detail rows */
    font-size: 1.1rem;
    color: #555;
    padding-bottom: 5px;
    border-bottom: 1px dashed #eee; /* Light dashed separator */
}

.registration-details-row:last-child {
    border-bottom: none;
}

@media (max-width: 1287px){
    .register-hero-section {
        height: 190px;
    }
}


/* Responsive adjustments */
@media (max-width: 767.98px) {
    main{
    width:100vw; 
    margin:0 auto; 
    background-color: #eeedf2;
}
    .register-hero-section{
        margin: 0px !important;
    }
    .form-label-custom {
        text-align: left; /* Align labels to the left on mobile */
        margin-bottom: 0; /* Remove margin below label on mobile as it's part of flex column */
        padding: 12px 15px; /* Adjust padding for mobile labels */
        padding-left: 15px; /* Ensure consistent left padding on mobile */
        width: 100%; /* Make label take full width */
        display: flex; /* Maintain flex for vertical centering */
        justify-content: flex-start; /* Align left on mobile */
        border-radius: 0; /* Ensure no rounding for internal mobile labels */
        box-shadow: none; /* Remove shadow */
        font-size: 0.85rem; /* Smaller font for mobile labels */
    }
    .form-row-custom {
        flex-direction: column; /* Stack columns vertically on mobile */
        border-bottom: 1px solid #eee; /* Maintain row borders on mobile for separation */
        margin-bottom: 0; /* No external margin for rows */
    }
    .form-row-custom .col-sm-5,
    .form-row-custom .col-sm-7 {
        width: 100%; /* Make columns full width */
        padding-left: 15px; /* Re-add default Bootstrap padding */
        padding-right: 15px;
    }
    .registration-card {
        padding: 0; /* Remove internal card padding on mobile to make cells edge-to-edge */
    }
    .submit-button {
        padding: 12px 40px;
        font-size: 1rem;
    }
    .register-hero-section {
        background-image: url('../images/shell-product-2.png');
        height: 180px;
        text-align: center;
        padding-left: 0;    
        padding-right: 0;
    }
    .registration-form-section {
        padding-top: 0px;
        padding-bottom: 0;
    }
    .form-control-custom,
    .form-select-custom {
        border: none;
        border-radius: 0;
        background-color: #fff;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 0.85rem;
    }
    .submit-button-container {
        padding: 20px 15px; /* Add padding around the submit button for mobile */
    }
    .registration-summary-section,
    .registration-form-section {
    margin-bottom: 0px;
}
}

/* Padding for the submit button section within the card */
.submit-button-container {
    padding: 20px 0; /* Add padding above and below the submit button */
}