/* css/style.css */
.product-checkboxes {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	text-align: center;
}

.product-checkboxes label {
	position: relative;
	margin-right: 10px;
	width: 130px;
	word-wrap: break-word;
}

.product-checkboxes img {
	width: 100px;
	/* Adjust the width as needed */
	height: auto;
	cursor: pointer;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
	-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
	border: 1px solid rgba(0, 0, 0, .15);
}

.product-checkboxes input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.product-checkboxes input:checked+img {
	border: 2px solid #007cba;
}

.checkbox-label {
	text-align: center;
	padding: 10px 5px;
}

.wcspc-tab-content {
	display: none;
	position: relative;
	width: 100%;
}

.tab.active {
	display: block;
}

.disabled {
	pointer-events: none;
	cursor: not-allowed;
}

.tab-button {
	display: inline-block;
	padding: 10px 20px;
	cursor: pointer;
}

.sticker-discount {
	color: green !important;
}

.attachment_container {
	border: 1px solid #cccc;
	border-radius: 5px;
	padding: 10px;
	margin: 20px 0;
	text-align: center;
}

progress {
	-webkit-appearance: none;
	/* Override default appearance */
	appearance: none;
	display: none;
	width: 70%;
	/* Full width */
	height: 10px;
	/* Set a fixed height */
	border: none;
	/* Remove border */
	border-radius: 5px;
	/* Rounded corners */
	background-color: #f3f3f3;
	/* Light grey background */
	color: #4CAF50;
	/* Green color for the progress bar */
	overflow: hidden;
	/* Ensure the inner bar is contained */

	margin: 10px auto;
}

progress::-webkit-progress-bar {
	background-color: #f3f3f3;
	/* Light grey background */
	border-radius: 10px;
	/* Rounded corners for the outer bar */
}

progress::-webkit-progress-value {
	background-color: #4CAF50;
	/* Green color for the progress value */
	border-radius: 10px;
	/* Rounded corners for the progress value */
}

progress::-moz-progress-bar {
	background-color: #4CAF50;
	/* Green color for the progress value */
	border-radius: 10px;
	/* Rounded corners for the progress value */
}

.wpspc_add_to_cart{
	margin-left: 2px!important;
	padding: 15px!important;
}

#customSizeFieldsRO input{
	margin: 10px;
	max-width: 50%;
}

#customQuantityFieldRO input{
	margin: 0px;
	width: 10%;
}

.wcspc_reorder_table .new_wcspc_qty_input{
	max-width: 40px!important;
}

.hidden-step {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Styles for hidden step 1 */
.hide-step-1 .material-selector-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hide-step-1 .product-checkboxes {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hide-step-1 .material-selector-wrapper label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.wcspc-tab-content.active {
    display: block !important;
}

.hide-step-1 .material-selector-wrapper,
.hide-step-1 .product-checkboxes,
.hide-step-1 .material-selector-wrapper label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

.hide-step-1 .product-checkboxes {
    display: flex !important;
}

.next-button:not(.disabled) {
    cursor: pointer;
    pointer-events: auto;
}

.wcspc-tabs li.active a {
    color: #000;
    cursor: default;
}

.wcspc-tab-content.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Ensure proper tab transitions */
.wcspc-tab-content {
    transition: opacity 0.3s ease;
}

.wcspc-tab-content.active:not(.hidden-step) {
    display: block !important;
}

/* Ensure step 2 appears in the correct position */
#attachment.wcspc-tab-content {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

/* Hide step 1 content when moving to step 2 */
.wcspc-tab-content.hidden-step .material-selector-wrapper,
.wcspc-tab-content.hidden-step .sticker-size,
.wcspc-tab-content.hidden-step .sticker-quantity {
    display: none !important;
}