@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

/* ========================================
   BASE STYLES
======================================== */
body {
	background-color: #999a9c !important;
	font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
	margin: 0;
	padding: 20px 10px;
}

#tinymce {
	background-color: #fff !important;
}

.mm-submit-disabled {
	pointer-events: none;
	cursor: default;
}

/* Input placeholder styles */
::placeholder {
	color: #999a9c;
}

/* Autofill styles */
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}

input:-internal-autofill-previewed,
input:-internal-autofill-selected,
textarea:-internal-autofill-previewed,
textarea:-internal-autofill-selected,
select:-internal-autofill-previewed,
select:-internal-autofill-selected {
	background-color: rgb(255, 255, 255) !important;
	background-image: none !important;
	color: #999a9c !important;
}

/* General input padding */
input {
	padding: 5px 8px;
}

/* Date input with calendar icon */
input[type='text'].date {
	content: "";
	background-image: url("calendar_icon.svg") !important;
	background-size: 20px 20px !important;
	background-repeat: no-repeat !important;
	background-position: 95% 50% !important;
	margin-left: 10px;
	padding: 15px;
}

/* Pickup point address */
.pickupPointAddress {
	border: none !important;
	font-weight: 600 !important;
	color: #404040 !important;
	padding: 0px !important;
	pointer-events: none !important;
	border-radius: 0px !important;
}

/* Upsell decline button */
#dont_want_upsell {
	background-color: transparent;
	background-image: none;
	border: none;
	color: #999a9c;
	text-shadow: none;
	transition: transparent;
	text-decoration: underline;
	margin-top: 10px;
}

/* Datepicker */
.ui-datepicker .ui-datepicker-title select {
	display: inline;
}

.mmform-container {
	background-color: #ffffff;
	color: #404040;
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-size: 100%;
	margin: 0 auto;
	width: 99%;
	max-width: 900px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 18px 1px rgba(0,0,0,0.11);
	-moz-box-shadow: 10px 10px 18px 1px rgba(0,0,0,0.11);
	box-shadow: 10px 10px 18px 1px rgba(0,0,0,0.11);
	overflow-x: hidden;
	box-sizing: border-box;
}

.mmform-container * {
	box-sizing: border-box;
}

.mmform-container h2 {
	color: #404040;
	font-family: 'Open Sans', sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 35px;
	margin: 10px 0px 15px 0px;
}

.mmform-container .form-desc {
}

fieldset.datafields,
fieldset.submitpart,
fieldset.titlepart,
fieldset.thankyoupart {
	border: none;
	margin: 0;
	padding: 0px 40px 0;
	width: 100%;
	box-sizing: border-box;
}

fieldset.titlepart {
	padding-top: 15px;
}

fieldset.datafields {
	padding-top: 10px !important;
}

fieldset.thankyoupart {
	padding-bottom: 40px;
}

fieldset.submitpart {
	padding-bottom: 25px;
	padding-top: 15px;
}

/* ========================================
   MODERN PRODUCT CARDS
======================================== */
#producttable-container {
	width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

.products-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 20px;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

/* Ensure all images in product cards are constrained */
.products-container img {
	max-width: 100%;
	height: auto;
}

.product-card {
	display: flex;
	gap: 15px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 8px;
	align-items: flex-start;
	transition: box-shadow 0.2s ease;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

.product-card:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-image {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0e0e0;
}

.product-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.product-info {
	flex: 1;
	min-width: 0;
}

.product-name {
	font-size: 16px;
	margin: 0 0 10px 0;
	font-weight: 600;
	line-height: 1.4;
	color: #404040;
}

.product-name a {
	color: #404040;
	text-decoration: none;
	transition: color 0.2s ease;
}

.product-name a:hover {
	color: #FFC107;
}

.prod-description {
	color: #666;
	font-size: 14px;
	margin-top: 5px;
}

.product-pricing {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.unit-price {
	font-weight: 600;
	font-size: 18px;
	color: #FFC107;
	white-space: nowrap;
}

span[id^="brunitprice"] {
	white-space: nowrap;
}

.multiply {
	color: #666;
	font-size: 16px;
}

.prodqty {
	width: 70px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	transition: border-color 0.2s ease;
	font-family: 'Open Sans', sans-serif;
}

.prodqty:focus {
	outline: none;
	border-color: #FFC107;
}

select.prodqty {
	border: 1px solid #ccc;
	outline: none;
	color: #404040;
	background: transparent;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	width: 70px !important;
	font-size: 16px;
	padding: 8px 5px;
	border-radius: 4px;
}

.unit-label {
	color: #666;
	font-size: 14px;
}

.product-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 10px;
	border-top: 1px solid #ddd;
	margin-top: 5px;
}

.total-label {
	color: #666;
	font-size: 14px;
}

.total-price {
	font-weight: bold;
	font-size: 18px;
	color: #404040;
}

.product-hidden-data {
	display: none;
}

/* ========================================
   MODERN ORDER SUMMARY
======================================== */
.order-summary {
	background: #f8f9fa;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.order-summary.products-total-summary {
	margin-top: 20px;
}

.order-summary.final-summary {
	margin-top: 20px;
	margin-bottom: 20px;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 16px;
}

.summary-row.total {
	border-top: 2px solid #FFC107;
	margin-top: 10px;
	padding-top: 15px;
	font-weight: bold;
	font-size: 20px;
}

.summary-row .label {
	color: #404040;
}

.summary-row .value {
	font-weight: 600;
	color: #404040;
	white-space: nowrap;
}

.summary-row.total .value {
	color: #FFC107;
}

/* ========================================
   FORM FIELDS
======================================== */
div.formrowcontainer {
	float: left;
	padding: 0px 0px 20px;
	width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
}

div.formrowcontainer label.formlabel,
div.formrowcontainer label.checkbox-formlabel {
	display: block;
	color: #404040;
	font-size: 100%;
	margin: 3px 0px 3px 5px;
	text-align: left;
	padding-top: 3px;
}

.formlabel {
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px !important;
	text-transform: uppercase;
}

div.formrowcontainer div.fieldcontainer {
	color: #464646;
	display: block;
}

div.fieldcontainer input[type='text'],
div.fieldcontainer input[type='email'],
div.fieldcontainer input[type='url'],
div.fieldcontainer input[type='number'],
div.fieldcontainer input[type='tel'],
div.fieldcontainer input[type='password'],
div.fieldcontainer select,
div.fieldcontainer textarea {
	border: 1px solid #ccc;
	outline: none;
	color: #999a9c;
	background: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 14px;
	margin: 0 5px;
	padding: 10px;
	width: 95%;
	border-radius: 25px !important;
}

div.fieldcontainer input[type='text']:focus,
div.fieldcontainer input[type='email']:focus,
div.fieldcontainer input[type='url']:focus,
div.fieldcontainer input[type='number']:focus,
div.fieldcontainer input[type='tel']:focus,
div.fieldcontainer input[type='password']:focus,
div.fieldcontainer select:focus,
div.fieldcontainer textarea:focus {
	border-color: #FFC107;
}

div.fieldcontainer textarea {
	resize: none;
}

div.fieldcontainer input[type='file'] {
	color: #999a9c;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 14px;
}

div.fieldcontainer input[type='tel'].intmobilenumber {
	width: 50%;
}

div.fieldcontainer input.number,
div.fieldcontainer input.date {
	width: 25%;
}

div.fieldcontainer input.date {
	background: transparent;
}

div.fieldcontainer input.time {
	width: 10%;
}

div.fieldcontainer select {
	width: 50%;
	padding: 5px;
	height: 33px;
	border-radius: 0;
}

div.fieldcontainer input[type='file'] {
	padding: 5px;
}

div.mmform-container div.fieldcontainer input.intmobilenumber[type="text"] {
	width: 44%;
}

.fieldcontainer img {
	display: none !important;
}

#online-payment-container img {
	display: block !important;
}

/* ========================================
   CHECKBOX STYLES
======================================== */
input[type='checkbox'] {
	display: none;
}

label.checkbox-formlabel,
label.checkbox-checked {
	cursor: pointer;
	overflow: visible;
	display: inline-block !important;
	position: relative;
	margin-bottom: 10px !important;
	padding-left: 12px;
	margin-left: 27px !important;
}

label.checkbox-formlabel:before,
label.checkbox-checked:before {
	background: transparent;
	content: '';
	position: absolute;
	top: 2px;
	left: -21px;
	width: 20px;
	height: 20px;
	border-radius: 5px;
}

label.checkbox-formlabel:before {
	border: 1px solid #cccccc;
}

label.checkbox-checked:before {
	border: 2px solid #FFC107;
	background-color: #FFC107;
	color: white;
}

label.checkbox-formlabel:hover:before {
	background-color: #d6d6d6;
}

label.checkbox-checked:hover:before {
	background-color: #999a9c;
	border-color: #999a9c;
}

.hideProductSelect:before {
	display: none !important;
}

.hideProductSelect:after {
	display: none !important;
}

.hideProductSelect {
	cursor: auto !important;
}

label.checkbox-checked:focus {
	border: 3px solid #999a9c;
}

label.checkbox-checked:after {
	opacity: 1;
	content: '';
	position: absolute;
	width: 0.5em;
	height: 0.25em;
	background: transparent;
	top: 9.5px;
	left: -14.5px;
	color: #ffffff;
	border: 3px solid #ffffff;
	border-top: none;
	border-right: none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* ========================================
   RADIO BUTTON STYLES
======================================== */
input[type='radio'] {
	display: none;
}

label.radio-label,
label.radio-selected {
	cursor: pointer;
	overflow: visible;
	display: inline-block;
	position: relative;
	margin-bottom: 7px;
	padding-top: 4px;
	padding-left: 30px;
	font-size: 16px;
}

label.radio-label:before,
label.radio-selected:before {
	background: transparent;
	border: 2px solid #ccc;
	content: '';
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	transition: border-color 0.2s ease;
}

label.radio-selected:before {
	border-color: #FFC107;
}

label.radio-selected:after {
	opacity: 1;
	content: '';
	position: absolute;
	background-color: #FFC107;
	width: 12px;
	height: 12px;
	border-radius: 100%;
	top: 8px;
	left: 6px;
}

label.radio-label .shippingmode-labeltext,
label.radio-selected .shippingmode-labeltext {
	vertical-align: top;
}

label.radio-label-payment {
	display: block !important;
	margin-left: 20px;
}

label.horizontal-radio::before {
	left: 50% !important;
	top: 170% !important;
	transform: translate(-18%, -50%);
}

label.horizontal-radio::after {
	left: 50% !important;
	top: 140% !important;
}

/* ========================================
   CONTAINER & LAYOUT
======================================== */
.mmform-container .container,
.mmform-container .mmblock-container {
	padding-right: 15px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}

.mmform-container .row {
	margin-right: -15px;
	margin-left: -15px;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* ========================================
   SHIPPING METHODS
======================================== */
.mmform-container .shipping-method-title {
	font-weight: bold;
	margin: 20px 0px 10px 0px;
	font-size: 16px;
}

#shipping-method-container {
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 8px;
}

#shipping-method-container > div {
	margin: 8px 0;
}

#online-payment-container {
	margin-left: 22px !important;
}

#online-payment-container div:first-child {
	margin-left: -20px !important;
	font-weight: 700;
}

/* ========================================
   ORDER SUMMARY & TOTALS
======================================== */
/* Table-based product list (legacy/fallback) */
table#producttable {
	font-size: 100%;
	width: 100%;
	border-collapse: collapse;
}

#producttable tr td {
	padding: 5px 0px;
}

#producttable tr.subtotal td {
	padding-top: 3px;
	font-weight: bold;
}

#producttable tr.last-product td {
	padding-bottom: 10px;
}

/* Product quantity selector */
select.prodqty {
	border: 1px solid #ccc;
	outline: none;
	color: #0a68d0;
	background: transparent;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	width: 45px !important;
	font-size: 14px;
	padding: 15px 5px;
	border-radius: 0px;
}

/* Subtotal display (for legacy responsive forms) */
.mmform-container .subtotal {
	padding-top: 3px;
	font-weight: bold;
	margin: 10px 0;
}

/* Shipping cost container */
#shippingcost-container {
	margin-top: 20px;
	font-weight: 600;
	font-size: 15px;
}

/* Coupon discount */
.mmform-container .coupondiscount {
	margin-top: 15px;
	font-weight: 600;
	font-size: 15px;
}

/* Order total containers */
.mmform-container .ordertotalvalue {
	font-size: 100%;
	font-weight: bold;
}

.mmform-container .ordertotalcontainer {
	border-bottom: 1px solid #888;
	padding-top: 3px;
	padding-bottom: 8px;
	font-weight: bold;
	margin: 15px 0px 20px 0px;
	font-size: 16px;
}

.mmform-container .ordertotalcontainer.second {
	border-top: none;
	margin-top: 0px;
}

/* Nowrap utility */
.mmform-container .nowrap {
	white-space: nowrap;
}

/* Price unit span */
span[id^="brunitprice"] {
	white-space: nowrap;
}

/* ========================================
   ERROR HANDLING
======================================== */
div.error-container {
	color: #ec1395;
	display: none;
	margin-left: 5px;
	margin-top: 8px;
	font-size: 14px;
	padding: 8px 12px;
	background: #ffe0e6;
	border-radius: 4px;
	border-left: 3px solid #ec1395;
}

.error-field {
	border: 1px solid #ec1395 !important;
}

/* ========================================
   SUBMIT BUTTON
======================================== */
.mmform-container div.submitcontainer a.submitbutton,
.mmform-container div.submitcontainer button.submitbutton,
.mmform-container button.mmform-event-button {
	background-color: #FFC107;
	border-radius: 30px;
	font-size: 20px;
	font-weight: normal;
	margin: 0px;
	padding: 15px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	width: 100%;
	color: #fff;
	text-align: center;
	display: block;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background-color 0.2s ease;
}

.mmform-container div.submitcontainer a.submitbutton:hover,
.mmform-container div.submitcontainer button.submitbutton:hover,
.mmform-container button.mmform-event-button:hover,
.packeta-selector-open:hover {
	background-color: #6d6d6d;
}

.mmform-container button.mmform-event-button {
	display: inline;
	height: 45px;
	width: 100px;
	padding: 0px;
}

.mmform-container div.belowsubmitcontainer {
	margin-top: 15px;
}

#dont_want_upsell {
	background-color: transparent;
	background-image: none;
	border: none;
	color: #999a9c;
	text-shadow: none;
	transition: transparent;
	text-decoration: underline;
	margin-top: 10px;
}

/* ========================================
   LINKS
======================================== */
.mmform-container a:-webkit-any-link {
	color: #FFC107;
	cursor: pointer;
	text-decoration: underline;
}

.mmform-container a:any-link {
	color: #FFC107;
	cursor: pointer;
	text-decoration: underline;
}

/* ========================================
   UTILITIES
======================================== */
.mmform-container .container,
.mmform-container .mmblock-container {
	padding-right: 15px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}

.mmform-container .nowrap {
	white-space: nowrap;
}

/* ========================================
   SELECT STYLING
======================================== */
select {
	-webkit-appearance: none;
	-webkit-border-radius: 0px;
	background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%) !important;
	background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em !important;
	background-size: 5px 5px, 5px 5px, 1px 1.5em !important;
	background-repeat: no-repeat !important;
	-moz-appearance: none;
	display: block;
	padding: 0.3rem !important;
}

button {
	border: none;
	-webkit-appearance: none;
	-webkit-border: none;
	cursor: pointer;
}

input {
	padding: 5px 8px;
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}

input:-internal-autofill-previewed,
input:-internal-autofill-selected,
textarea:-internal-autofill-previewed,
textarea:-internal-autofill-selected,
select:-internal-autofill-previewed,
select:-internal-autofill-selected {
	background-color: rgb(255, 255, 255) !important;
	background-image: none !important;
	color: #999a9c !important;
}

::placeholder {
	color: #999a9c;
}

/* ========================================
   SPECIAL FIELDS
======================================== */
.ui-datepicker .ui-datepicker-title select {
	display: inline;
}

.pickupPointAddress {
	border: none !important;
	font-weight: 600 !important;
	color: #404040 !important;
	padding: 0px !important;
	pointer-events: none !important;
	border-radius: 0px !important;
}

#idopont .icon {
	display: inline-block;
	color: white;
	border: 2px solid white;
	padding: 10px 12px;
	margin-bottom: 10px;
	white-space: nowrap;
	cursor: pointer;
}

.input-field:focus {
	border: 2px solid #FFC107;
}

.upload-btn-wrapper {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.btn {
	color: #ffffff;
	background-color: #FFC107;
	padding: 3px 25px;
	font-size: 15px;
	border-color: none !important;
}

.upload-btn-wrapper input[type=file] {
	font-size: 100px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

#cardnumber,
#cvv,
#cardexpmonth,
#cardexpyear {
	background: transparent none repeat scroll 0 0 !important;
	border: 1px solid #ccc !important;
	margin: 0 5px !important;
	outline: medium none !important;
	padding: 10px !important;
}

.packeta-selector-open {
	background-color: #FFC107;
	font-size: 11px;
	font-weight: normal;
	padding: 7px 0;
	letter-spacing: 1px;
	width: 249px;
	color: #fff;
	text-align: center;
	display: block;
	text-decoration: none;
	border: none;
	border-radius: 30px;
	cursor: pointer;
}

/* ========================================
   RESPONSIVE STYLES
======================================== */
@media (max-width: 480px) {
	fieldset.datafields,
	fieldset.submitpart,
	fieldset.titlepart,
	fieldset.thankyoupart {
		padding: 20px 20px 0;
	}
	
	div.fieldcontainer input[type='text'],
	div.fieldcontainer input[type='email'],
	div.fieldcontainer input[type='url'],
	div.fieldcontainer input[type='number'],
	div.fieldcontainer input[type='tel'],
	div.fieldcontainer input[type='password'],
	div.fieldcontainer select,
	div.fieldcontainer textarea {
		width: 90%;
	}
	
	div.fieldcontainer input.date {
		width: 75%;
	}
	
	div.fieldcontainer input.time {
		width: 25%;
	}
	
	div.error-container {
		margin-left: 0px;
	}
	
	fieldset.submitpart {
		padding-bottom: 10px;
	}
	
	.mmform-container h2 {
		font-size: 24px;
	}
	
	/* Product card mobile adjustments */
	.product-card {
		flex-direction: column;
		align-items: center;
	}
	
	.product-image {
		width: 100%;
		max-width: 200px;
		height: 200px;
	}
	
	.product-info {
		width: 100%;
	}
	
	.product-pricing {
		justify-content: center;
	}
	
	.product-name {
		text-align: center;
	}
}

@media (min-width: 481px) and (max-width: 768px) {
	.product-image {
		width: 100px;
		height: 100px;
	}
}

/* ========================================
   PLACEHOLDER STYLES
======================================== */
@media (min-width: 200px) {
	::-webkit-input-placeholder {
		color: transparent;
	}
	:-moz-placeholder {
		color: transparent;
	}
	::-moz-placeholder {
		color: transparent;
	}
	:-ms-input-placeholder {
		color: transparent;
	}
	input::placeholder {
		color: transparent;
	}
	textarea::-webkit-input-placeholder {
		color: transparent;
	}
	textarea:-moz-placeholder {
		color: transparent;
	}
	textarea::-moz-placeholder {
		color: transparent;
	}
	textarea:-ms-input-placeholder {
		color: transparent;
	}
	textarea::placeholder {
		color: transparent;
	}
}

/*CUSTOM-MAXWIDTH*/
.mmform-container {
	max-width: 690px;
}
/*CUSTOM-MAXWIDTH-END*/