/* Form Styles */
.payment-form {
    max-width: 100%;
}

.card-wrapper {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-logo img {
    height: 24px;
}

.card-security {
    color: #666;
    font-size: 14px;
}

.card-security i {
    margin-right: 4px;
    color: #22c55e;
}

.form-group {
    margin-bottom: 20px;
}

/* Stripe Element Styles */
.card-element {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.card-element:hover {
    border-color: #999;
}

.card-element.StripeElement--focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* Button Styles */
.btn-submit {
    width: 93%;
    padding: 12px 20px;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-submit:hover {
    background: #4338ca;
}

.btn-submit:disabled {
    background: #818cf8;
    cursor: not-allowed;
}

.button-loader {
    margin-left: 8px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive Styles */
@media (max-width: 480px) {
    .card-wrapper {
        padding: 15px;
    }

    .btn-submit {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* ---- Add-card modal (client details) ---------------------------------------------------------
   These rules used to live in a second, different css/stripe.css in the admin repo. Both panels load this
   one file, so they are kept together here - whichever package installed last used to overwrite the other. */

/* Trigger button on the client details view */

	.btn-stripe {
		background-color: #635bff;
		border-color: #635bff;
		color: #fff;
	}

	.btn-stripe:hover,
	.btn-stripe:focus,
	.btn-stripe:active {
		background-color: #4f46e5;
		border-color: #4f46e5;
		color: #fff;
	}

/* Card field - the Stripe iframe mounts here, so it is styled to read as a sky-form input.
   Stripe adds the StripeElement* classes to this same element as the field's state changes. */

	.stripe-card-field {
		background: #fff;
		border: 1px solid #bdbdbd;
		border-radius: 2px;
		padding: 11px 10px;
		margin-bottom: 12px;
		transition: border-color 0.2s, box-shadow 0.2s;
	}

	.stripe-card-field.StripeElement--focus {
		border-color: #635bff;
		box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.15);
	}

	.stripe-card-field.StripeElement--invalid {
		border-color: #dc2626;
		box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
	}

	.stripe-card-field.StripeElement--webkit-autofill {
		background-color: #fff !important;
	}

/* The card fields sit in a modal that is narrow by default - a little more room stops the
   number, expiry and CVC reading as cramped, and it still collapses cleanly on a phone. */

	#add-card-details-modal .modal-dialog {
		max-width: 520px;
		width: auto;
	}

	#add-card-details-modal .modal-body {
		padding: 20px 25px;
	}

/* Secure payment note under the card field */

	.stripe-secure-note {
		color: #888;
		font-size: 12px;
		margin: 8px 0 0 0;
	}

	.stripe-secure-note .fa {
		margin-right: 4px;
	}