/* stripe.css  */

.stripe-container {
	margin-top: 2.0rem;
	display: flex;
    flex-direction: column; /* Align items in a column */
    align-items: flex-start;   
	width: 100%;
}

/* Base style for the Stripe Element */
.stripe-base {
    border-radius: 0.25rem;
	border: 0.1rem solid var(--lightgreycolor); /*Light blue border for enabled state */
	background-color: var(--whitecolor); /* This applies to the parent container */
    padding: 1.25em 1.0rem;
}

/* Focus state for the Stripe Element */
.stripe-focus {
   	border-color: var(--lightbluecolor); /* Dark blue on focus */
	box-shadow: 0 0 0.5rem rgba(0, 25, 125, 0.4); /* Subtle shadow effect */
}

/* Invalid state for the Stripe Element */
.stripe-invalid {
    border-color: var(--redcolor);
    box-shadow: 0 0 0.5rem rgba(255, 0, 0, 0.4);
}

/* Stripe element
   nb: Stripe iframe internal styling is via the payment-stripe.js file */
/* style between iframe and element border area */
.card-element iframe {
    background-color: var(--whiteolor)!important; /* Ensure iframe background matches */
}

.card-element {
    background-color: var(--whitecolor)!important;  
	width:100%;
}

/* Style the powered-by text container */
.powered-by-stripe {
    font-family: Rubik, sans-serif; /* Match Stripe's preferred font style */
    font-size: 0.875rem; /* Slightly smaller than default text */
    color: #6c757d; /* Light gray text for secondary emphasis */
  	display: block;
	margin: 1.5rem auto 0 auto; /* top margin + center horizontally */
}

/* Style the Stripe logo text */
.powered-by-stripe .stripe-logo {
    color: #6772e5; /* Stripe's official blue */
    font-weight: bold; /* Bold to emphasize the brand name */
    text-decoration: none; /* Remove underline for the Stripe text */
}