/*
Theme Name: SBOnlineServices
Theme URI: http://astra.io
Template: astra
Author: Kenneth Paskett
Author URI: http://wpastra.com
Description: An Astra Child Theme built for SB Online Services
Version: 1.0.0
Text Domain: sb-online-services
*/

.osano-cm-widget {
    display: none !important;
}

/* Fix for WordPress Customizer cursor issue */
form.customize-unpreviewable input,
form.customize-unpreviewable select,
form.customize-unpreviewable button,
a.customize-unpreviewable {
    cursor: auto !important;
}

#custom-cf7-form input[type="text"],
#custom-cf7-form input[type="email"],
#custom-cf7-form input[type="tel"],
#custom-cf7-form textarea {
    cursor: text;
}


/* --- 1. Define Variables (Dark Mode Edition) --- */
:root {
    /* Brand Colors */
    --form-accent: #31698C;
    --form-error: #FF6B6B;
    /* High contrast Light Red */

    /* Text Colors */
    --form-label-text: #FFFFFF;
    --form-input-text: #F0F0F0;
    --form-placeholder: #A0A0A0;

    /* FIXED: Lighter border to hit 3:1 contrast ratio */
    --form-input-bg: rgba(255, 255, 255, 0.05);
    --form-input-border: #9CA3AF;
    /* Lightened from #4B5563 */
    --form-input-border-focus: #31698C;

    /* Fonts */
    --form-font-poppins: 'Poppins', sans-serif;
    --form-font-inter: 'Inter', sans-serif;
}

/* --- 2. Container Structure --- */
#custom-cf7-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 0;
    font-family: var(--form-font-inter);
}

/* --- 3. Style the Labels --- */
#custom-cf7-form label {
    margin: 0 0 8px 0;
    padding: 0;
    display: block;
    font-family: var(--form-font-poppins);
    font-weight: 700;
    font-size: 14px;
    color: var(--form-label-text);
    /* White */
    line-height: 1.2;
}

/* Style the Asterisk */
#custom-cf7-form .red {
    color: var(--form-error) !important;
    font-weight: normal;
}

/* --- 4. Style the Inputs (Dark Mode) --- */
#custom-cf7-form input[type="text"],
#custom-cf7-form input[type="email"],
#custom-cf7-form input[type="tel"],
#custom-cf7-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 45px;
    padding: 0 14px;
    font-size: 16px;
    font-family: var(--form-font-inter);

    /* Dark Mode Colors */
    color: var(--form-input-text);
    background-color: var(--form-input-bg);
    border: 1px solid var(--form-input-border);

    border-radius: 4px;
    /* Slight rounded corners look better on modern dark UI */
    margin-top: 5px;
    margin-bottom: 20px;
    transition: all 0.2s ease-in-out;
}

#custom-cf7-form textarea {
    height: 120px;
    padding: 12px 14px;
}

/* Fix Placeholder Text Color (Browsers default to grey, but we want control) */
#custom-cf7-form ::placeholder {
    color: var(--form-placeholder);
    opacity: 1;
}

/* Focus State - Glow Effect */
#custom-cf7-form input:focus,
#custom-cf7-form textarea:focus {
    outline: none;
    border-color: var(--form-input-border-focus);
    background-color: rgba(255, 255, 255, 0.1);
    /* Slightly lighter on focus */
    box-shadow: 0 0 0 1px var(--form-input-border-focus);
}

/* --- 5. Style the Button --- */
#custom-cf7-form input[type="submit"] {
    display: inline-block;
    width: auto;
    height: 45px;
    padding: 0 30px;
    background-color: var(--form-accent);
    color: #FFFFFF;
    border: none;
    border-radius: 100px;
    /* Pill shape */
    font-family: var(--form-font-inter);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 10px;
}

#custom-cf7-form input[type="submit"]:hover {
    background-color: #ffffff;
    /* Turn white on hover */
    color: var(--form-accent);
    /* Text becomes accent color */
    transform: translateY(-2px);
    /* Subtle lift */
}

/* --- 6. Error Messages (Validation) --- */
.wpcf7-not-valid-tip {
    color: var(--form-error);
    font-size: 12px;
    margin-top: -15px;
    /* Pull it closer to the field */
    margin-bottom: 15px;
    display: block;
}

/* --- 7. Success/Response Box (Dark Mode Version) --- */
/* The previous bright green box would look blinding on dark. 
   This creates a dark-green glass effect. */
.wpcf7 form.sent .wpcf7-response-output {
    background-color: rgba(43, 122, 75, 0.2);
    /* Transparent Green */
    border: 1px solid #2B7A4B;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #4ade80;
    /* Light bright green text */
}

/* Error Box (e.g. Spam/Fail) */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    background-color: rgba(214, 54, 55, 0.2);
    /* Transparent Red */
    border: 1px solid var(--form-error);
    color: #ffb3b3;
    /* Light red text */
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    margin-top: 20px;
}

/* Hide the loader */
.wpcf7-spinner {
    margin-top: 15px;
}

#custom-cf7-form input[type="submit"] {
    /* ... existing styles ... */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Adds definition to the button shape */
}