/* CSS for shop filter dropdown */
form.woocommerce-ordering label {
	margin-right: 0px;
	line-height: 20px;
}

form.woocommerce-ordering select {
	background-color: transparent;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: #DDF4CA;
	border-bottom-width: 4px;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding-bottom: 2px;
	line-height: 20px;
	vertical-align: baseline;
}

/* CSS for cart */
table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
	width: 200px;
	text-align: left;
}

th.wc-block-cart-items__header-image {
	padding-left: 16px;
}

/* ///// Sendy ///// */
/* Sendy subscribe form in footer */

.subscription-wrapper,
.sendy-wrapper-firstname-lastname,
.sendy-emailaddress,
.firstname,
.lastname {
	box-sizing: border-box;
}

.subscription-wrapper .sendy-wrapper-firstname-lastname {
	display: flex;
  	flex-direction: row;
}

.subscription-wrapper .sendy-wrapper-firstname-lastname .firstname {
	width: 28%;
	padding: 10px;
}

.subscription-wrapper .sendy-wrapper-firstname-lastname .lastname {
	width: 28%;
	padding: 10px;
}

.subscription-wrapper .sendy-wrapper-firstname-lastname .sendy-emailaddress {
	width: 44%;
	padding: 10px;
}

.subscription-wrapper .sendy-form-label {
	font-size: 14px;
	line-height: 16px;
	color: #946602;
}

.subscription-wrapper .sendy-form-label span.sendy-optionalspan-label {
	font-size: 11px;
	line-height: 13px;
	color: #C58907;
}

.subscription-wrapper input[type=text], .subscription-wrapper input[type=email] {
	width: 100%;
	flex-grow: 1; /* Makes the input fill the remaining space */
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: solid 2px #fcdb43;
	padding: 5px 2px;
	background-color: transparent;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
}

.subscription-wrapper input[type=text]:focus, .subscription-wrapper input[type=email]:focus {
	border-bottom-color: #efc815;
}

.sendy-button {
	text-align: right;
	padding-right: 10px;
}

.sendy-button #submit-btn {
	cursor: pointer;
	padding: 10px 30px;
    font-size: 14px;
    font-family: inherit;
	font-size: 16px;
	font-weight: 800;
    background: #fcdb43;
	color: inherit;
    border: none;
    border-radius: 5px;
}

.sendy-button #submit-btn:hover {
	background: #ffe360;
}

/* Target the status message element */
.sendy-statusmessage {
	text-align: right;
}

.sendy-statusmessage-wrapper {
	width: 60%;
	text-align: right;
	display: inline-block;
	padding: 10px;
}

.sendy-statusmessage #status {
/* 1. Appearance */
    font-size: 16px;
	text-align: right;
    
/* 2. Transition (Crucial for the fade effect) */
/* This makes opacity, color, and background change smoothly over 0.5 seconds */
    transition: opacity 0.5s ease-in-out, color 0.5s, background-color 0.5s; 
    
/* 3. Initial State */
/* Ensure it starts fully visible and ready to accept text */
    opacity: 1; 
}

/* 4. Define Error Color (Red) */
.sendy-statusmessage #status[style*="color: red"] {
    color: #6d2e2e;
    font-size: 14px;
    border-bottom: 1px dashed #e6a0a0;
}

/* 5. Define Success Color (Green - for "Already Subscribed") */
.sendy-statusmessage #status[style*="color: green"] {
    color: #3b7c3b;
    border-bottom: 1px dashed #a3d5a3;
}

/* 6. Define Loading Color (Grey - for "Verifying...") */
.sendy-statusmessage #status[style*="color: gray"] {
    color: #758275;
	font-size: 14px;
    border-bottom: 1px dashed #abb9ab;
}

/* Override Focus styles */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:focus-within,
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:focus, 
.wp-site-blocks *:focus, 
.wp-site-blocks *:focus-within {
    outline: none;
    outline-offset: none;
}


/* CSS rules to apply when the screen width is 900px or less */
@media screen and (max-width: 900px) {

	.subscription-wrapper .sendy-wrapper-firstname-lastname {
		flex-direction: column;
	}

	.subscription-wrapper .sendy-wrapper-firstname-lastname .firstname, 
	.subscription-wrapper .sendy-wrapper-firstname-lastname .lastname, 
	.subscription-wrapper .sendy-wrapper-firstname-lastname .sendy-emailaddress {
		width: 100%;
	}
	
	.sendy-statusmessage-wrapper {
		width: 100%;
		display: block;
	}


}