/**
 * VeriDoc Update Payment Details Block Frontend Styles
 *
 * @package VeriDoc
 */

/* Update Payment Details Color Scheme Styles */
.veridoc-update-payment-details input::placeholder,
.veridoc-update-payment-details textarea::placeholder {
    color: var(--veridoc-update-payment-details-placeholder-color, #A7A7A7) !important;
}

.veridoc-update-payment-details input:focus,
.veridoc-update-payment-details select:focus {
    border-color: var(--veridoc-update-payment-details-input-focus-border-color, #25984E) !important;
}

.veridoc-update-payment-details #card-button:hover {
    background-color: var(--veridoc-update-payment-details-button-hover-background-color, #FFFFFF) !important;
    color: var(--veridoc-update-payment-details-button-hover-text-color, #25984E) !important;
    border-color: var(--veridoc-update-payment-details-button-border-color, #25984E) !important;
}

/* Custom select option hover color */
.veridoc-update-payment-details .custom-select-option:hover {
    background-color: var(--veridoc-update-payment-details-select-option-hover-color, #F6F8F7) !important;
}

/* Custom select option selected state */
.veridoc-update-payment-details .custom-select-option.selected,
.veridoc-update-payment-details .custom-select-option[aria-selected="true"] {
    background-color: var(--veridoc-update-payment-details-select-option-selected-bg-color, #24984E) !important;
    color: var(--veridoc-update-payment-details-select-option-selected-text-color, #FFFFFF) !important;
}

/* Tail Select custom styling */
.veridoc-update-payment-details .ts-dropdown-content .option:hover {
    background-color: var(--veridoc-update-payment-details-select-option-hover-color, #F6F8F7) !important;
}

.veridoc-update-payment-details .ts-dropdown-content .option.selected,
.veridoc-update-payment-details .ts-dropdown-content .option[data-selected="true"] {
    background-color: var(--veridoc-update-payment-details-select-option-selected-bg-color, #24984E) !important;
    color: var(--veridoc-update-payment-details-select-option-selected-text-color, #FFFFFF) !important;
}

/* Custom Select wrapper border color */
.veridoc-update-payment-details .custom-select {
    border-color: var(--veridoc-update-payment-details-input-border-color, #CCCCCC) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

/* Custom Select wrapper focus border color */
.veridoc-update-payment-details .custom-select:focus,
.veridoc-update-payment-details .custom-select:focus-within {
    border-color: var(--veridoc-update-payment-details-input-focus-border-color, #25984E) !important;
}

/* Tail Select wrapper border color */
.veridoc-update-payment-details .ts-wrapper {
    border-color: var(--veridoc-update-payment-details-input-border-color, #CCCCCC) !important;
}

/* Tail Select wrapper focus border color */
.veridoc-update-payment-details .ts-wrapper.focus,
.veridoc-update-payment-details .ts-wrapper.active {
    border-color: var(--veridoc-update-payment-details-input-focus-border-color, #25984E) !important;
}

/* Stripe Elements border colors */
.veridoc-update-payment-details #card-number-element,
.veridoc-update-payment-details #card-expiry-element,
.veridoc-update-payment-details #card-cvc-element {
    border-color: var(--veridoc-update-payment-details-input-border-color, #CCCCCC) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

/* Stripe Elements focus border color - applied via JavaScript but fallback CSS */
.veridoc-update-payment-details #card-number-element:focus-within,
.veridoc-update-payment-details #card-expiry-element:focus-within,
.veridoc-update-payment-details #card-cvc-element:focus-within {
    border-color: var(--veridoc-update-payment-details-input-focus-border-color, #25984E) !important;
}