﻿fieldset {
  border: 0;
	margin: 0;
  padding: 0;
  display: grid;
}

legend { 
	display: contents;
	padding: 0;
}

legend,
label { font-size: .875rem }

input,
textarea,
select,
button {
	color: inherit;
	
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	
	padding: var(--space-200) var(--space-300);
	border: solid thin var(--color-yellow-400);
	border-radius: var(--space-100);
	max-width: 100%;

	border-radius: var(--tx-s-1);
}


[type="color"] { padding: initial }

[type="radio"],
[type="checkbox"] { margin: auto 0 }

[type="file"] { font-size: revert }

textarea { min-height: 9rem; }

select {
	min-width: 5rem;
	background-color: white;
}

:disabled,
:disabled + .checkbox__info,
:disabled + .radio-button__info {
	opacity: .5
}


/* Custom Radio Buttons */
.radio-button--custom .radio-button__input { display: none; }

.radio-button--custom .radio-button__info {
	display: flex;
	align-items: center;
	text-decoration: inherit;
}

.radio-button--custom .radio-button__info::before {
	content: '';
	width: .875rem;
	height: .875rem;
	margin: 0 .25rem 0 0;
	border-radius: 100%;
	border: solid thin gray;
	background: whitesmoke;
}

.radio-button--custom :checked + .radio-button__info::before,
.radio-button--custom .radio-button__info.selected::before {
	background: dimgrey;
	border: solid thin dimgrey;
	box-shadow: inset 0 0 0 3px white;
}



/* Radio Buttons Cards */
.radio-button--card { position: relative; }
.radio-button--card .radio-button__input { display: none; }

.radio-button--card .radio-button__info {
	display: flex;
	align-items: center;
	text-decoration: inherit;
	padding: .75rem;
}

.radio-button--card .radio-button__info::after {
	content: '';
	position: absolute;
	top: 0;
  bottom: 0;
  left: 0;
  right: 0;
	border: solid thin silver;
	border-radius: .5rem;
	background: white;
	z-index: -1;
}

.radio-button--card :checked + .radio-button__info,
.radio-button--card .radio-button__info.selected {
	color: black;
}

.radio-button--card :checked + .radio-button__info::after,
.radio-button--card .radio-button__info.selected::after {
	background: whitesmoke;
	border: solid thin grey;
	box-shadow: inset 0 0 0 2px white;
}





/* Custom Check Boxes */
.checkbox--custom .checkbox__input { display: none; }

.checkbox--custom .checkbox__info {
	display: flex;
	align-items: center;
	text-decoration: inherit;
}

.checkbox--custom .checkbox__info::before {
	content: '';
	width: .875rem;
	height: .875rem;
	margin: 0 .25rem 0 0;
	border-radius: .25rem;
	background: whitesmoke;
	box-shadow: inset 0 0 0 1px gray;
}

.checkbox--custom :checked + .checkbox__info::before,
.checkbox--custom :checked + input + .checkbox__info::before {
	background: dimgrey;
	box-shadow: 
		inset 0 0 0 1px dimgrey, 
		inset 0 0 0 3px white;
}



/* Check Boxes Cards */
.checkbox--card { position: relative }
.checkbox--card .checkbox__input { display: none }

.checkbox--card .checkbox__info {
	display: flex;
	align-items: center;
	text-decoration: inherit;
	padding: .75rem;
	width: 100%;
}

.checkbox--card .checkbox__info::after {
	content: '';
	position: absolute;
	top: 0;
  bottom: 0;
  left: 0;
  right: 0;
	border: solid thin silver;
	border-radius: .5rem;
	background: whitesmoke;
	z-index: -1;
}

.checkbox--card :checked + input + .checkbox__info,
.checkbox--card :checked + .checkbox__info,
.checkbox--card .checkbox__info.selected {
	color: white;
}

.checkbox--card :checked + input + .checkbox__info::after,
.checkbox--card :checked + .checkbox__info::after,
.checkbox--card .checkbox__info.selected::after {
	background: grey;
	border: solid thin grey;
	box-shadow: inset 0 0 0 2px white;
}



.field-validation-valid:empty {
	display: none;
}

.discount-coupon-code, 
.gift-card-coupon-code {
	flex-grow: 1;
}

.qty-input--product-order-summary {
	max-width: 3rem;
	text-align: center;
}

#price-range input {
	max-width: 8rem;
}

.qty-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.qty-input {
	max-width: 3rem;
	text-align: center;
}

