/* ========== REFERRAL FORM STYLING ========== */



/* Form Wrapper */

.referral-form-wrapper {max-width: 948px;margin: 0 auto;background: #ffffff;padding: 50px 60px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.08);}

ul.bredcrumb.ref-breadcrumb li a, ul.bredcrumb.ref-breadcrumb li {
    color: #6E757B !important;
}

section.breadcrumb-section {
    border-bottom: 1px solid #e5e5e5;
}

ul.bredcrumb.ref-breadcrumb li:before {
    display: none;
}

ul.bredcrumb.ref-breadcrumb li a {
    padding-right: 0 !important;
}

ul.bredcrumb.ref-breadcrumb  li {
    padding-right: 0;
}

/* Form Header */

.referral-form-header {

    text-align: center;

    margin-bottom: 50px;

}



.referral-form-title {

    color: #1B7895;

    font-size: 36px;

    font-weight: 600;

    margin: 0 0 15px 0;

}



.referral-form-subtitle {color: #666;font-size: 14px;line-height: 1.6;margin: 0;max-width: 600px;margin: 0 auto !important;}



/* Form Sections */

.referral-form-section {

    margin-bottom: 45px;

}



/* Section Headers */

.referral-section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}



.referral-section-title {

    color: #1B7895;

    font-size: 20px;

    font-weight: 600;

    margin: 0 0 1px 0 !important;

}



.referral-section-subtitle {

    color: #999;

    font-size: 13px;

    margin: -15px 0 20px 0;

}



.referral-required {

    color: #5DBDB6;

    font-size: 13px;

}



/* Form Rows */

.referral-form-row {

    display: flex;

    gap: 20px;

    margin-bottom: 20px;

}



/* Form Fields */

.referral-form-field {

    flex: 1;

    position: relative;

}



.referral-form-field.referral-half {

    flex: 1;

}



.referral-form-field.referral-full {

    flex: 1 1 100%;

}



/* Input Wrapper for fields with units */

.referral-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}



.referral-form-field.referral-with-unit .referral-input {

    width: 100%;

    padding-right: 45px;

}



/* Input Fields */

.referral-input,

.referral-textarea {

    width: 100%;

    padding: 15px 18px;

    border: 1px solid #E5E5E5;

    background: #F6F5F2;

    border-radius: 4px;

    font-size: 14px;

    color: #333;

    box-sizing: border-box;

    transition: all 0.3s ease;

}



.referral-input:focus,

.referral-textarea:focus {

    outline: none;

    border-color: #5DBDB6;

    background: #fff;

}



.referral-input::placeholder,

.referral-textarea::placeholder {

    color: #999;

}



/* Textarea - Set to 4 rows */

.referral-textarea {

    min-height: 100px;

    height: 100px;

    resize: vertical;

    font-family: inherit;

    line-height: 1.5;

}



/* Number input - prevent negative values */

input[type="number"].referral-input::-webkit-inner-spin-button,

input[type="number"].referral-input::-webkit-outer-spin-button {

    opacity: 1;

}



/* Unit Label for Weight/Height - Outside positioned */

.referral-unit {

    position: absolute;

    right: 15px;

    color: #56C2C2;

    font-size: 14px;

    pointer-events: none;

    top: 50%;

    transform: translateY(-50%);

    background: transparent;

    padding: 0;

    font-weight: 500;

}



/* Date Input Styling */

input[type="date"].referral-input {

    position: relative;

}



input[type="date"].referral-input::-webkit-calendar-picker-indicator {

    cursor: pointer;

    opacity: 0.6;

}



/* Checkbox Container */

.referral-checkbox-container {

    margin-top: 20px;

}



/* Checkbox Styling - 2 Column Grid Layout */

.referral-checkbox-container .wpcf7-form-control {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px 30px;

}



.referral-checkbox-container .wpcf7-list-item {

    margin: 0 !important;

    display: block !important;

}



.referral-checkbox-container .wpcf7-list-item label {

    display: flex !important;

    align-items: center !important;

    gap: 10px;

    cursor: pointer;

    margin: 0 !important;

    padding: 0 !important;

}



.referral-checkbox-container .wpcf7-list-item input[type="checkbox"] {

    width: 20px;

    height: 20px;

    min-width: 20px;

    min-height: 20px;

    cursor: pointer;

    accent-color: #5DBDB6;

    margin: 0 !important;

    padding: 0 !important;

    flex-shrink: 0;

    order: 1;

}

section.ref-page {
    padding: 70px 0px;
}

.referral-checkbox-container .wpcf7-list-item-label {font-size: 15px;color: #666;line-height: 1.5;margin: 0 !important;padding: 0 !important;order: 2;display: flex;align-items: center;}



/* Remove CF7 default checkbox wrapper styling */

.referral-checkbox-container .wpcf7-form-control-wrap {

    display: block;

}



/* Remove any CF7 paragraph margins */

.referral-checkbox-container p {

    margin: 0 !important;

    padding: 0 !important;

}



/* Submit Row */

.referral-submit-row {display: flex;justify-content: start;align-items: center;margin-top: 40px;gap: 0;}



/* reCAPTCHA */

.referral-recaptcha {

    flex: 0 0 auto;

}



/* Submit Button */

.referral-submit-btn {

    background: #5DBDB6;

    color: white;

    border: none;

    padding: 14px 40px;

    font-size: 16px;

    font-weight: 500;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.3s ease;

    margin-left: auto;

}



.referral-submit-btn:hover {

    background: #4da9a3;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(93, 189, 182, 0.3);

}



/* Remove CF7 default styling */

.referral-form-wrapper .wpcf7-form p {

    margin: 0;

}



.referral-form-wrapper .wpcf7-form-control-wrap {

    display: block;

    width: 100%;

}



/* Validation Messages */

.referral-form-wrapper .wpcf7-not-valid-tip {

    color: #dc3232;

    font-size: 12px;

    margin-top: 5px;

    display: block;

}



.wpcf7-form input[type="text"], 

.wpcf7-form input[type="email"], 

.wpcf7-form input[type="tel"],

.wpcf7-form input[type="date"],

.wpcf7-form input[type="number"],

.wpcf7-form textarea, 

.wpcf7-form-control.wpcf7-text, 

.wpcf7-form-control.wpcf7-email, 

.wpcf7-form-control.wpcf7-textarea {width: 100%;padding: 15px;border: 0;border-radius: 4px;font-size: 14px;transition: border-color 0.3s ease, box-shadow 0.3s ease;box-sizing: border-box;font-family: inherit;background: #F6F5F2 !important;}



.referral-form-wrapper .wpcf7-response-output {

    margin: 20px 0;

    padding: 15px;

    border-radius: 4px;

}



.referral-form-wrapper .wpcf7-validation-errors {

    border: 2px solid #dc3232;

    background: #fef7f7;

    color: #dc3232;

}



.referral-form-wrapper .wpcf7-mail-sent-ok {

    border: 2px solid #5DBDB6;

    background: #f0faf9;

    color: #1B7895;

}



/* ========== RESPONSIVE DESIGN ========== */



@media (max-width: 768px) {

    .referral-form-wrapper {

        padding: 30px 25px;

    }



    .referral-form-title {

        font-size: 28px;

    }



    .referral-form-subtitle {

        font-size: 13px;

    }



    .referral-section-title {

        font-size: 18px;

    }



    .referral-form-row {

        flex-direction: column;

        gap: 15px;

    }



    .referral-form-field.referral-half,

    .referral-form-field.referral-with-unit {

        flex: 1 1 100%;

    }



    /* Checkbox grid to single column on mobile */

    .referral-checkbox-container .wpcf7-form-control {

        grid-template-columns: 1fr;

        gap: 12px;

    }



    .referral-submit-row {

        flex-direction: column-reverse;

        align-items: stretch;

        gap: 20px;

    }



    .referral-recaptcha {

        display: flex;

        justify-content: center;

        width: 100%;

    }



    .referral-recaptcha > div {

        transform: scale(0.9);

        transform-origin: center;

    }



    .referral-submit-btn {

        width: 100%;

        margin-left: 0;

    }



    .referral-section-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

        margin-bottom: 20px;

    }



    .referral-section-title {

        margin-bottom: 15px;

    }

}



@media (max-width: 480px) {

    .referral-form-wrapper {

        padding: 25px 20px;

    }



    .referral-form-title {

        font-size: 24px;

    }



    .referral-form-subtitle {

        font-size: 12px;

    }



    .referral-input,

    .referral-textarea {

        padding: 12px 15px;

        font-size: 13px;

    }



    .referral-section-title {

        font-size: 16px;

    }



    .referral-checkbox-container .wpcf7-list-item-label {

        font-size: 13px;

    }



    .referral-recaptcha > div {

        transform: scale(0.85);

    }

}



/* ========== END REFERRAL FORM STYLING ========== */







/* Breadcrumb Section */

.breadcrumb-section {

    background-color: #F3F1ED;

    padding: 20px 0;

}



.bredcrumb {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-family: 'Nunito Sans', sans-serif;

    font-size: 14px;

}



.bredcrumb li {

    color: #666666;

    display: flex;

    align-items: center;

}



.bredcrumb li a {

    color: #666666;

    text-decoration: none;

    transition: color 0.3s ease;

}



.bredcrumb li a:hover {

    color: #5DBCC4;

}



.bredcrumb li:first-child::after {

    content: "/";

    margin-left: 10px;

    color: #666666;

}



/* Mobile Responsive */

@media (max-width: 768px) {

    .breadcrumb-section {

        padding: 15px 0;

    }

    

    .bredcrumb {

        font-size: 13px;

        gap: 8px;

    }

    

    .bredcrumb li:first-child::after {

        margin-left: 8px;

    }

}