/**
 * CSS for the "pmEngine" component
 * THIS FILE MAY BE LOADED IN BOTH FRONTEND AND BACKEND: DO-NOT ADD GENERAL CSS HERE. ONLY SPECIFIC CASES css.
 */

/**
 * Popup messages Boxes
 * e.g. validation result messages, or validation pending messages
 */

/**
 * Z-INDEX -- (of Popup messages Boxes)
 */
.PVE_messageBox { z-index: 990; }
.PVE_messageBox ._messageBoxContent { z-index: 991; }
.PVE_messageBox ._messageBoxArrow { z-index: 996; }

.ui-dialog .PVE_messageBox { z-index: 5000; }
.ui-dialog .PVE_messageBox ._messageBoxContent { z-index: 5001; }
.ui-dialog .PVE_messageBox ._messageBoxArrow { z-index: 5006; }


/**
 * ERROR MESSAGE POPUP (DEFAULT THEME) -- (of Popup messages Boxes)
 */
:root {
	--error-color: #ee0101;
	--border-radius-el: 50px;
}
.PVE_messageBox{
	--arrow-bg-color: var(--error-color);
}
/**
 * SUCCESS MESSAGE POPUP -- (of Popup messages Boxes)
 */
.PVE_messageBox.greenPopup {
	--arrow-bg-color: #33be40;
}
/**
 * PENDING MESSAGE POPUP -- (of Popup messages Boxes)
 */
.PVE_messageBox.blackPopup {
	--arrow-bg-color: #222222;
}

/**
 * main CSS -- (of Popup messages Boxes)
 */
.PVE_messageBox {
	display: block !important;
	position: absolute;
	top: 300px;
	left: 300px;
	cursor: pointer;
	text-align: left;
	--prompt-border-width: 2px;
	--prompt-padding-v: 10px;
	--prompt-padding-h: 10px;
}

/**
 * CSS to display the message box inline instead of popup.
 */
.PVE_messageBox.inline {
	position: relative;
	top: 0;
	left: 0;
	display: inline-block;
}

/**
 * CSS for the inner content of the message box
 */
.PVE_messageBox ._messageBoxContent {
	max-width: 320px;
	width: 100%;
	background: var(--arrow-bg-color);
	color: #FFF;
	position:relative;
	min-width: 120px;
	font-size: 16px;
	border: var(--prompt-border-width) solid #ddd;
	box-shadow: 0 0 calc(var(--prompt-padding-h) * 0.4) #000;
	padding: var(--prompt-padding-v) var(--prompt-padding-h);
	border-radius: calc(var(--prompt-padding-h) * 1.2);
}

/**
 * CSS for the inner content of the message box (when displayed inline)
 */
.PVE_messageBox.inline ._messageBoxContent {
	box-shadow: none;
	border: none;
	border-radius: 0;
}

/**
 * CSS for the arrow of the message box
 */
._messageBoxArrow {
	vertical-align: middle;
	--arrow-size: 1em;
	border: var(--arrow-size) solid transparent;
	z-index: 1000;
	/* works well for both RTL and LTR, because we have block display, position relative, with specific width, and do not set left and right */
	position: relative;
	display: block;
	width: 0;
	height: 0;
	left: unset;
	right: unset;
	margin: calc(-1 * var(--prompt-border-width)) 1em 0 1em;
}
/**
 * CSS for the arrow of the message box (when message is placed below the referenced element)
 */
._messageBoxArrow._placeBottom {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-o-box-shadow: none;
	margin: 0 1em calc(var(--prompt-padding-v) * -1 - var(--prompt-border-width)) 1em;
}

/**
 * CSS for RTL for the arrow of the message box
 */
body[dir='rtl'] ._messageBoxArrow,
body.rtl ._messageBoxArrow {
	/* See above: 1em side margins works well for both RTL and LTR, because we have block display, position relative, with specific width, and do not set left and right */
}

/**
 * Positioning of ._messageBoxArrow boxes
 */
._arrowLeft {
	border-left: 0;
	border-right-color: var(--arrow-bg-color);
}
._arrowRight {
	border-right: 0;
	border-left-color: var(--arrow-bg-color);
}
._arrowUp {
	border-top: 0;
	border-bottom-color: var(--arrow-bg-color);
}
._arrowDown {
	border-bottom: 0;
	border-top-color: var(--arrow-bg-color);
}

/**
 * Ecommerce form: SETS of "radio" and "checkboxes"
 */
.ecommerce_form div.radio,
.ecommerce_form fieldset.radio,
.ecommerce_form div.checkboxes,
.ecommerce_form fieldset.checkboxes {
	margin: 0 !important;
	border: 1px solid transparent !important;
}
.ecommerce_form fieldset.checkboxes {
	margin: 0 !important;
}

/**
 * Ecommerce form: SETS of "radio" and "checkboxes" sets. Invalid state
 */
.ecommerce_form div.radio.invalid,
.ecommerce_form fieldset.radio.invalid,
.ecommerce_form div.checkboxes.invalid,
.ecommerce_form fieldset.checkboxes.invalid {
	margin: 0 !important;
	border: 1px solid var(--error-color) !important;
}

/**
 * Vertical margin reset for specific "container" elements
 */
body div div.no-margin-vertically-toggled {
	margin-top: 0!important;
	margin-bottom: 0!important;
}

/**
 * In-place persistent popup window
 */
.ecommerce-in-place-popup-toggle {
	position: relative;
}
.ecommerce-in-place-popup-content {
	z-index: 2001;
	padding: 1em;
	display: block;
	white-space: nowrap;
	min-width: min(320px, 90vw);
	max-width: 90vw;
	position: absolute;
	top: calc(100% + 4px);
	right: -50%;
	background: white;
	box-shadow: 2px 2px 6px black;
	color: black;
	border-radius: 8px;
}

/**
 * Forms styling
 */
.ecommerce_form .password-group .input-group {
	display: flex;
	align-items: center;
}
.ecommerce_form .password-group .input-group > input {
	border-radius: var(--border-radius-el) 0 0 var(--border-radius-el);
	margin: 0;
}
.ecommerce_form .password-group .input-group > :last-child {
	border-radius: 0 1.5em 1.5em 0;
	margin: 0;
	align-self: stretch;
	border: 1px solid #ccc;
	border-left: none;
}
.ecommerce_form joomla-field-fancy-select.uk-select {
	padding: 0 !important;
	background-image: none !important;
}
.ecommerce_form joomla-field-fancy-select .choices { border: none !important }
.ecommerce_form joomla-field-fancy-select .choices__inner:not(:focus),
.ecommerce_form select:not([multiple]):not([size]):not(:focus),
.ecommerce_form input:not(:focus):not([type="checkbox"]):not([type="radio"]),
.ecommerce_form select:not(:focus),
.ecommerce_form textarea:not(:focus) {
	border: 1px solid rgba(0,0,0,.25);
}
.ecommerce_form joomla-field-fancy-select .choices__inner,
.ecommerce_form :not(.input-group) > input:not([type="checkbox"]):not([type="radio"]):not([type="password"]),
.ecommerce_form select {
	border-radius: var(--border-radius-el) !important;
}
.ecommerce_form joomla-field-fancy-select.invalid .choices__inner {
	border: 1px solid var(--error-color) !important;
}

/**
 * CSS for the plan "then" price text
 */
.plan-then-price {
	/*font-size: 1rem;
	text-decoration: none;
	color: red;
	z-index: 111;
	position: absolute;
	bottom: -60px;
	right: -20px;
	width: 12em;*/
}

/**
 * Subscription plan selector
 */
.uk-form-controls.is-plan-selector-box {
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 20px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.uk-form-controls.is-plan-selector-box:hover {
	border-color: #101010;
	background: #FAEEDD;
}
.uk-form-controls.is-plan-selector-box.selected {
	border-color: #101010;
	background: #FAEEDD;
}
.uk-form-controls.is-plan-selector-box .price {
	font-size: 32px;
	font-weight: bold;
}
.uk-form-controls.is-plan-selector-box .price span {
	font-size: 18px;
	font-weight: normal;
	opacity: .5;
}
.uk-form-controls.is-plan-selector-box input {
	margin-right: 10px;
}
.uk-form-controls.is-plan-selector-box label {
	display: flex;
	align-items: center;
}
.uk-form-controls.is-plan-selector-box .price > span.old-price {
	font-size: 18px;
	font-weight: normal;
	opacity: .5;
	text-decoration: line-through;
}
.uk-form-controls.is-plan-selector-box .price > span.new-price,
.uk-form-controls.is-plan-selector-box.selected .price > span.price-with-coupon {
	opacity: 1;
	text-decoration: none;
	position: relative;
	font-size: 1em;
	font-weight: bold;
}

/**
 * Custom styling for UI-kit notification messages
 */
.uk-notification-message-success {
	background-color: darkgreen !important;
	color: white !important;
}

.uk-notification-message-warning {
	background-color: darkorange !important;
	color: white !important;
}

.uk-notification-message-danger {
	background-color: #ee0101 !important;
	color: white !important;
}

/**
 * Custom styling for Joomla system messages
 */
body #tm-page-container #system-message-container {
	z-index: 1000;
	position: fixed;
	width: 320px;
	left: calc(50% - 160px);
	top: 20px;
	height: min-content;
}

/**
 * Customize modal
 */
.pve-modal-no-padding .uk-modal-body .uk-modal-header {
	padding: 0 !important;
}

.pve-modal-no-padding .modal-body,
.pve-modal-no-padding .uk-modal-body .uk-modal-body {
	padding: 0 !important;
}
.uk-modal button.uk-modal-large-close-btn {
	scale:200%;
	right:2em;
	top:2em;
	z-index:10;
	background:#000;
	border-radius:4px;
}
.uk-modal .uk-modal-title {
	margin-top: 0;
}
@media (max-width: 959px) {
	.uk-modal button.uk-modal-large-close-btn {
		right: 0;
	}
}

/**
 * Customize loading animation of modal record edit forms
 */
.form-loading-spinner-box {
	display: none;
	position: absolute !important;
	top: 0!important;
	left: 50% !important;
	transform: translate(-50%, 0%) !important;
	opacity: 0.75 !important;
	z-index: 9999 !important;
	padding: 24px !important;
	background-color: rgb(255, 255, 255)!important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 100% !important;
	flex-direction: column !important;
	justify-content: center !important;
}
.form-loading-spinner-box-inner {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	align-items: center !important;
}

/**
 * Customize BOOTSTRAP modal (backend) that has no padding, no-padding modal is typically used for invoices so we will make it full width
 */
.modal-dialog.pve-modal-no-padding {
	max-width: 98%;
	margin-left: auto;
	margin-right: auto;
}

/**
 * Product box CSS
 */
.uk-dark.uk-transition-toggle .ecommerce-product-box {
	text-shadow: 0 0 4px white !important;
}
.ecommerce-product-box {
	position: relative;
	padding-top: 0.3em;
}
.ecommerce-product-box * {
	position: relative;
	font-size: 1rem;
}

/**
 * CSS for the stock status message
 */
.ecommerce-product-box .stock-status-msg {
	position: absolute;
	top: -0.4em;
	right: 0;
	visibility: hidden;
}
.ecommerce-product-box .no-stock-msg {
	position: absolute;
	top: 1.2em;
	right: 0;
	visibility: hidden;
}
.ecommerce-product-box .not-enough-stock-msg {
	position: absolute;
	top: 1.2em;
	right: 0;
	visibility: hidden;
}

/**
 * (currently disabled in Javascript) CSS for the default image message (when variant image is not available)
 */
.ecommerce-product-box .default-image-shown-msg {
	position: absolute;
	top: -1.8em;
	right: 0;
	visibility: hidden;
}

/**
 * CSS for the characteristics selector list to be a vertical column
 */
.characteristics-selector-list {
	display: flex;
	flex-direction: column;
	/*min-height: 3em;*/
}
.characteristics-selector-list select.uk-select:not([multiple]):not([size]),
.characteristics-selector-list select.uk-select {
	border: 1px solid #ddd;
	flex-grow: 0;
	flex-basis: 60%;
}

/**
 * CSS for the selection rows used for: characteristics and quantity container
 */
.ecommerce-product-box .selection-row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	margin: 4px 0;
	align-items: center;
}
.ecommerce-product-box .add-to-cart-btn {
	margin-top: 0.5em;
}

/**
 * Customize the cart module and its modal
 */
.shopping-cart-icon .uk-badge {
	position: absolute;
	top: 15px;
	right: -8px;
	background-color: red !important;
	color: white !important;
	font-size: 12px;
	padding: 3px 6px;
	border-radius: 50%;
}
.shopping-cart-box .uk-modal-dialog {
	max-width: min(100%, 540px) !important;
}
.shopping-cart-box .uk-button-small {
	font-size: 12px;
}
.shopping-cart-box .uk-table {
	font-size: 16px;
}
.shopping-cart-box img {
	height: 60px;
	width: 60px;
	aspect-ratio: 1 / 1;
}

/**
 * Customize quantity input number field to have a plus/minus button
 */
.shopping-cart-box .quantity-plus-minus .quantity-selector {
	height: 2em;
}
.quantity-plus-minus .quantity-selector {
	position: relative;
	display: grid;
	grid-template-columns: 2em 3em 2em;
	gap: 2px;
	align-items: center;
	border: 0;
	border-radius: 2em;
	overflow: hidden;
	height: 2.4em;
}
.quantity-plus-minus .quantity-selector input {
	border: 0;
	height: 80%;
}
.quantity-plus-minus .quantity-selector button {
	border: 0;
	border-radius: 1em;
}
/**
 * Hide the label of the quantity selector
 * - because the quantity box selector becomes the 1st visible cell, REMOVE the grid display on the container so that it is not width limited.
 */
.quantity-plus-minus .quantity-selection-box .selection-row-lbl {
	display: none;
}
.quantity-plus-minus .quantity-selection-box {
	display: block;
}

/**
 * Customize the quantity input number field to have a plus/minus button
 */
.quantity-plus-minus .quantity-btn {
	height: 100%;
	background: #eee;
	border: none;
	cursor: pointer;
}
.quantity-plus-minus .quantity-input {
	height: 100%;
	border: none;
	text-align: center;
	font-size: 16px;
	-moz-appearance: textfield; /* Remove arrows in Firefox */
}
.quantity-plus-minus .quantity-input::-webkit-inner-spin-button,
.quantity-plus-minus .quantity-input::-webkit-outer-spin-button {
	-webkit-appearance: none; /* Remove arrows in Chrome/Safari */
	margin: 0;
}

/**
 * (Mobile) Customize the inputs used by shopping quantity module
 */
@media (max-width: 767px) {
	.shopping-cart-box .uk-modal-dialog {
		padding-left: 2px !important;
		padding-right: 2px !important;
	}
	.shopping-cart-box .quantity-plus-minus .quantity-selector {
		min-width: 5em;
		margin-left: -1em;
		margin-right: -1em;
	}
}
@media (max-width: 467px) {
	.shopping-cart-box .mod-cart-buttons {
		display: flex;
		gap: 0.5em;
		justify-content: end;
	}
	.shopping-cart-box .mod-cart-buttons .uk-button {
		padding-left: 0.5em;
		padding-right: 0.5em;
		font-size: 0.88em;
	}
	.shopping-cart-box .ecommerce-product-box * {
		font-size: 1em;
	}
	.shopping-cart-box .is-products-table tr > td:first-child img {
		margin-right: 0 !important;
		margin-bottom: 0.5em;
	}
	.shopping-cart-box .uk-table tr > th:first-child,
	.shopping-cart-box .uk-table tr > td:first-child {
		padding-right: 0.05em !important;
	}
	.shopping-cart-box .is-products-table tr > th:first-child,
	.shopping-cart-box .is-products-table tr > td:first-child {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/**
 * Customize a radio-set to be a button-group
 */
.ecommerce-product-box .radio-button-group {
	display: grid;
	/** autofit the columns */
	grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
	gap: 0;
	margin: 0.25em 0;
	width: 100%;
}
.ecommerce-product-box .radio-button-group input[type="radio"] {
	display: none; /* Hide the real radio buttons */
}
.ecommerce-product-box .radio-button-group label {
	text-align: center;
	padding: 10px 0.1em;
	border: 1px solid #ccc;
	background: #f5f5f5;
	cursor: pointer;
	border-radius: 0;
	user-select: none;
	transition: background 0.25s, border-color 0.25s;
}
/* Style for the selected radio's label */
.ecommerce-product-box .radio-button-group input[type="radio"]:checked + label {
	background: #FFC34F;
	color: white;
	border-color: #FFC34F;
}

/**
 * Customize the contents of a uk-grid containing products:
 * - Limit the product images to same height
 * - Set a minimum height for the product descriptions.
 */
.el-item:not(.uk-card-default):not(.uk-card-primary) {
	border-color: transparent;
}

.ecommerce-plan-or-product-box-grid .el-item.uk-card {
	--product-box-padding: 16px;
	--product-box-neg-margin: calc(-1 * var(--product-box-padding));
	padding: var(--product-box-padding);
	border-radius: 16px;
}
.ecommerce-plan-or-product-box-grid .el-item.uk-card .el-image {
	object-fit: cover;
	height: 400px;
	max-height: 400px;
	max-width: 108%;
}
.ecommerce-plan-or-product-box-grid .el-item.uk-card .el-image,
.ecommerce-plan-or-product-box-grid .el-item.uk-card .ecommerce-product-images-gallery {
	margin: var(--product-box-neg-margin);
	margin-bottom: 0;
}
.ecommerce-plan-or-product-box-grid .el-title + .el-meta {
	/*min-height: 6.2em;*/
}
#cart-plan-products-suggestion-box .uk-slide-active .uk-card {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	overflow: hidden;
}

/**
 * Customize the product gallery
 */
.ecommerce-product-images-gallery {
	position: relative;
}
.ecommerce-product-images-gallery .uk-slider-container {
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	position: relative;
}
.el-slidenav.uk-slidenav-large svg,
.ecommerce-gallery-arrows svg {
	color: wheat;
	_width: 1.2em;
	_height: 1.2em;
	overflow: visible;
}
.el-slidenav.uk-slidenav-large svg polyline,
.ecommerce-gallery-arrows svg polyline {
	-webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

/**
 * Customize the product gallery arrows
 */
/*.ecommerce-gallery-arrows {
	border: 1px solid transparent !important;
	padding: 0.5em !important;
	transition: background 0.5s, border-color 0.5s !important;
}
div + .ecommerce-gallery-arrows {
	border-radius: 0 1em 1em 0 !important;
}
.ecommerce-gallery-arrows + .ecommerce-gallery-arrows {
	border-radius: 1em 0 0 1em !important;
}
.ecommerce-gallery-arrows:hover {
	background: rgba(0, 0, 0, 0.5) !important;
}
.ecommerce-gallery-arrows:hover {
	background: rgba(0, 0, 0, 0.5) !important;
}*/

/**
 * Customize: Gallery product article link
 */
.product-article-link-btn {
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
	background:transparent !important;
	font-size: 0.8em !important;
	color: #fff !important;
	text-shadow: 1px 1px 2px #000 !important;
	padding: 0.25em 0.5em !important;
	border-color: transparent !important;
	border-width: 0 !important;
	/*border-width: 1px 0 0 1px !important;
	border-style: solid !important;*/
	transition: background 0.5s, border-color 0.5s !important;
	border-radius: 0 !important;
}
.product-article-link-btn:hover {
	background: rgba(0, 0, 0, 0.5) !important;
	border-color: white !important;
}

/**
 * Customize: badges to have different background colors
 */
.uk-badge.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}
.uk-badge.bg-warning {
    background-color: #ffc107 !important;
    color: #fff !important;
}
.uk-badge.bg-success {
    background-color: #28a745 !important;
    color: #fff !important;
}
.uk-badge.bg-dark {
    background-color: #000 !important;
    color: #fff !important;
}
.uk-badge.bg-info {
    background-color: #17a2b8 !important;
    color: #fff !important;
}
.uk-badge.bg-primary {
    background-color: #007bff !important;
    color: #fff !important;
}
.uk-badge.bg-abandoned {
    background-color: #6c757d !important;
    color: #fff !important;
}

.record-list-header {
	max-width: 50%;
}