/**
 * Entel Credits Frontend Styles
 */

/* --- My Account - General --- */
.ec-myaccount-balance-info {
    /* Uses .woocommerce-info for base styling */
    margin-bottom: 1.5em; /* Add some space below */
}
.ec-myaccount-balance-info strong {
    /* Make balance stand out slightly more if needed */
    /* font-weight: 600; */
}

/* --- My Account - Manage Sub-accounts Page --- */

/* Table listing existing sub-accounts */
.account-sub-accounts {
    margin-bottom: 2em;
}

/* Ensure buttons in actions column have some space */
.account-sub-accounts .sub-account-actions .button {
    margin-right: 5px;
    margin-bottom: 5px; /* Add space for wrapping on small screens */
    padding: 0.5em 0.8em; /* Slightly smaller buttons */
    font-size: 0.9em;
}

/* Style for the dynamically added email prompt during unlink */
.ec-unlink-email-prompt {
    display: none; /* Hidden by default, shown by JS */
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd; /* Light border */
    background-color: #f9f9f9; /* Light background */
    border-radius: 3px;
    text-align: left; /* Ensure content aligns left */
}
.ec-unlink-email-prompt p.ec-unlink-prompt-message {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 8px !important; /* Ensure spacing below message */
    font-size: 0.9em;
    color: #555;
}
.ec-unlink-email-prompt input[type="email"].ec-unlink-new-email-input {
    width: calc(100% - 22px); /* Adjust width to roughly align with buttons below */
    max-width: 300px; /* Prevent it getting too wide */
    margin-bottom: 8px;
    padding: 8px;
    box-sizing: border-box; /* Include padding in width */
    display: block; /* Ensure it takes block space */
}
.ec-unlink-email-prompt .button {
     font-size: 0.9em; /* Match other action buttons */
     padding: 0.5em 0.8em;
     vertical-align: middle; /* Align buttons nicely */
}
.ec-unlink-email-prompt .ec-unlink-spinner { /* Spinner inside prompt */
    float: none;
    vertical-align: middle;
    margin-left: 5px;
    visibility: hidden; /* Controlled by JS */
}


/* Form for adding a new sub-account */
#ec-add-subaccount-form {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid #eee;
}

/* Style for messages (success/error) shown via AJAX */
#ec-add-subaccount-messages {
    /* Uses .woocommerce-message or .woocommerce-error */
    margin-bottom: 1em;
}

/* Username suggestions area */
#ec-username-suggestions {
    display: none; /* Hidden by default */
    font-size: 0.9em;
    margin-top: 0.5em;
    color: #777;
}
#ec-username-suggestions code {
    background-color: #f7f7f7;
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid #ddd;
}

/* --- ADDED/MODIFIED: Styles for Password Field + Generate Button --- */
#ec-add-subaccount-form .ec-password-row .ec-password-input-wrapper {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align items */
    gap: 8px; /* Add space between input and button */
}

#ec-add-subaccount-form .ec-password-row .ec-password-input-wrapper input[type="password"] {
    flex-grow: 1; /* Allow input to take available space */
    margin-right: 0; /* Remove default margin if any */
}

#ec-add-subaccount-form .ec-password-row .ec-password-input-wrapper .ec-generate-password {
    flex-shrink: 0; /* Prevent button from shrinking */
    padding: 0.6em 0.8em; /* Adjust padding as needed */
    line-height: 1; /* Adjust line-height */
    white-space: nowrap; /* Prevent text wrapping */
    vertical-align: middle; /* Re-add vertical align if needed after flex */
}

/* Optional: Adjustments for smaller screens if needed */
@media (max-width: 768px) {
    #ec-add-subaccount-form .ec-password-row .ec-password-input-wrapper {
        /* Example: Allow wrapping on small screens */
        /* flex-wrap: wrap; */
    }
    #ec-add-subaccount-form .ec-password-row .ec-password-input-wrapper input[type="password"] {
         /* Example: Full width on small screens if wrapped */
        /* width: 100%; */
        /* margin-bottom: 5px; */ /* Add space if wrapped */
    }
}
/* --- END ADDED/MODIFIED --- */


/* AJAX Spinner - uses default WC spinner styles if available */
#ec-add-subaccount-form .ec-form-spinner {
    /* Visibility controlled by JS */
    float: none;
    vertical-align: middle;
    margin-left: 10px;
    opacity: 0.7;
}

/* Add other frontend styles as needed */