.php-donate-form {

    width: 100%;

    padding: 0 20px;

}



/* Inputs y textarea */

.php-donate-form input[type="text"],

.php-donate-form input[type="tel"],

.php-donate-form input[type="date"],

.php-donate-form input[type="email"],

.php-donate-form input[type="number"],

.php-donate-form input[type="password"],

.php-donate-form input[type="search"],

.php-donate-form textarea,

.php-donate-form select {

    font-size: 14px;

    padding: 10px 15px;

    box-shadow: none;

    border-radius: 0;

    color: var(--default-color);

    background-color: var(--surface-color);

    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);

    width: 100%;

    transition: border-color 0.2s ease-in-out, background-color 0.3s ease;

}



/* Autofill Chrome */

.php-donate-form input:-webkit-autofill,

.php-donate-form input:-webkit-autofill:hover,

.php-donate-form input:-webkit-autofill:focus,

.php-donate-form input:-webkit-autofill:active,

.php-donate-form textarea:-webkit-autofill,

.php-donate-form textarea:-webkit-autofill:hover,

.php-donate-form textarea:-webkit-autofill:focus,

.php-donate-form textarea:-webkit-autofill:active,

.php-donate-form select:-webkit-autofill,

.php-donate-form select:-webkit-autofill:hover,

.php-donate-form select:-webkit-autofill:focus,

.php-donate-form select:-webkit-autofill:active {

    -webkit-box-shadow: 0 0 0px 1000px var(--surface-color) inset !important;

    -webkit-text-fill-color: var(--default-color) !important;

    transition: background-color 5000s ease-in-out 0s;

}



/* Focus normal */

.php-donate-form input:focus,

.php-donate-form textarea:focus,

.php-donate-form select:focus {

    border-color: var(--accent-color);

    outline: none;

    box-shadow: 0 0 1px var(--accent-color);

}



/* Placeholder */

.php-donate-form input::placeholder,

.php-donate-form textarea::placeholder {

    color: color-mix(in srgb, var(--default-color), transparent 70%);

}



/* Botones */

.php-donate-form button[type="button"],

.php-donate-form button[type="submit"],

.php-donate-form button[type="button"]:focus,

.php-donate-form button[type="submit"]:focus {

    font-size: 13px;

    padding: 7px 25px;

    margin: 0 0 0 30px;

    border-radius: 4px;

    color: var(--accent-color);

    background: transparent;

    border: 1px solid var(--default-color);

    text-transform: uppercase;

    transition: all 0.3s ease-in-out;

    cursor: pointer;

}



.php-donate-form button[type="button"]:hover,

.php-donate-form button[type="submit"]:hover,

.php-donate-form button[type="button"]:focus:hover,

.php-donate-form button[type="submit"]:focus:hover {

    color: var(--contrast-color);

    background: var(--accent-color);

    border-color: var(--accent-color);

}



/* Mensajes */

.php-donate-form .loading {

    font-size: 14px;

    color: var(--accent-color);

    margin-top: 10px;

}



.php-donate-form .error-message {

    display: none;

    font-size: 13px;

    color: #dc3545;

    margin-top: 10px;

}



.php-donate-form .sent-message {

    font-size: 13px;

    color: green;

    margin-top: 10px;

}



/* Inputs con error */

.php-donate-form input.input-error,

.php-donate-form textarea.input-error,

.php-donate-form select.input-error {

    border-color: #dc3545;

    background-color: #f8d7da;

    box-shadow: none;

    background-image: url('data:image/svg+xml;utf8,<svg fill="%23dc3545" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 16px 16px;

    padding-right: 35px;

}



/* Mostrar mensaje de error cuando el input tiene la clase input-error */

.php-donate-form input.input-error + .error-message,

.php-donate-form textarea.input-error + .error-message,

.php-donate-form select.input-error + .error-message {

    display: block;

}



/* Stripe Elements */

.php-donate-form #card-number,

.php-donate-form #card-expiry,

.php-donate-form #card-cvc {

    padding: 10px 15px;

    background-color: var(--surface-color);

    color: var(--default-color);

    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);

    border-radius: 0;

    box-shadow: none;

    transition: border-color 0.2s ease-in-out;

}



.php-donate-form .StripeElement--focus {

    border-color: var(--accent-color) !important;

    box-shadow: 0 0 1px var(--accent-color) !important;

}