Appointment

/* --- CF7 Custom Form Styling --- */ .cf7-custom-form { background-color: #ffffff; padding: 20px 10px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Minimalist Underline Input Fields */ .cf7-custom-form .cf7-clean-input { width: 100% !important; border: none !important; border-bottom: 1px solid #e0e0e0 !important; border-radius: 0 !important; padding: 10px 0 !important; font-size: 14px !important; color: #222222 !important; background: transparent !important; outline: none !important; box-shadow: none !important; transition: border-color 0.3s ease !important; } .cf7-custom-form .cf7-clean-input::placeholder { color: #888888; } .cf7-custom-form .cf7-clean-input:focus { border-bottom-color: #19255b !important; } /* Radio Button Pills (Preferred Consultation Type) */ .consult-type-wrapper { margin-top: 10px; } .consult-type-wrapper .consult-label { font-size: 14px; font-weight: 700; color: #222222; margin-bottom: 12px; display: block; } .consult-type-wrapper .wpcf7-radio { display: flex; gap: 12px; flex-wrap: wrap; } .consult-type-wrapper .wpcf7-list-item { margin: 0 !important; flex: 1; min-width: 100px; } .consult-type-wrapper .wpcf7-list-item label { display: block; position: relative; cursor: pointer; } /* Hide Default Radio Circle */ .consult-type-wrapper input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; } /* Custom Styled Radio Pills */ .consult-type-wrapper .wpcf7-list-item-label { display: block; padding: 12px 15px; background-color: #f5f5f5; border-radius: 8px; font-size: 14px; font-weight: 500; color: #222222; text-align: center; transition: all 0.3s ease; } /* Radio Checked State (Mint Green) */ .consult-type-wrapper input[type="radio"]:checked + .wpcf7-list-item-label { background-color: #b2f3ad; font-weight: 700; color: #0f3818; } /* Submit Pill Button */ .submit-btn-wrapper { margin-top: 20px; } .btn-appointment { display: inline-flex !important; align-items: center !important; background-color: #b2f3ad !important; color: #0f3818 !important; font-size: 14px !important; font-weight: 700 !important; border: none !important; padding: 6px 28px 6px 8px !important; border-radius: 50px !important; cursor: pointer !important; transition: all 0.3s ease !important; gap: 12px !important; } .btn-appointment .btn-arrow { width: 38px; height: 38px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; color: #0f3818; transition: transform 0.3s ease; } .btn-appointment:hover { background-color: #a2ea9c !important; box-shadow: 0 6px 20px rgba(178, 243, 173, 0.4) !important; transform: translateY(-2px); } .btn-appointment:hover .btn-arrow { transform: translateX(3px); background-color: #ffffff; } /* Hide Default CF7 Loading Spinner & Validation Boxes */ .wpcf7-spinner { display: none !important; } .wpcf7-not-valid-tip { font-size: 12px; color: #dc3545; margin-top: 4px; }