/* Bootstrap customize */

/* Primary text color */
a, .page-link {
	color: #000000;
}

.text-primary {
	color: #000000 !important;
}

a.text-primary:focus,
a.text-primary:hover {
	color: #000000 !important;
}

/* Primary background color */

.btn-primary,
.bg-primary,
.page-item.active .page-link,
.dropdown-item.active, 
.dropdown-item:active,
.list-group-item.active {
	background-color: #000000 !important;
	color: #FFFFFF;
	z-index: 0!important;
	border-color: #000000 !important;
}

.btn-primary:hover {
	color: #88bb14 !important;
}

/* Primary border color */

.btn-primary,
.btn-primary:hover,
.page-item.active .page-link,
.border-primary {
	border-color: #000000 !important;
}


/* Customizing forms */

.hideme {
	display: none;
}

/*change toggle switch color*/
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #000000 !important;
    background-color: #000000 !important;
}

.request-preview .fas, 
.shipment-preview .fas {
	color: #000000 !important;
}

.bg-white {
	background-color: #ffffff !important;
}
/*.btn{
	background-color: #ecf5e7;
}*/

.text-white {
    color: #fff !important;
}

.text-danger {
    color: black !important;
}

.border-danger {
	border-color: black !important;
}

.footer, .bg-dark {
	background-color: #403e40 !important;
}

.list-unstyled a {
	color: white !important;
}

.carousel-indicators .active{
	background-color: #88bb14;
}

.bg-dark {
	background-color: #7a7a7a !important;
}

.btn-danger,
.bg-slingoteka {
	color: #fff;
	background-color: #88bb14;
	border-color: #88bb14;
	border: none;
}

.btn-danger:hover {
	background-color: #2FAE49;
	color: white;
}

.btn-more-info {
	background-color: #88bb14; 
	color:white; 
	border:none; 
	font-size:16px; 
	padding:10px 10px;
}

.btn-more-info:hover {
	background-color: #2FAE49;
	color: white;
}

/*Blog*/

.blog-img {
	height: 300px;
	background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.blog-img img {
	width: 100%;
	height: auto;
}

/*Admin product images*/
div.image-buttons {
	display: block;
	background-color: #00000091;
	color: white;
	width:96%; 
	position:absolute; 
	top:0; 
	left:0;
	padding: 5px;
	
}

div.image-buttons p {
	color: white;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
}

/*div.second-image:hover + div.image-buttons {
	display: block;
}*/

/*Admin gallery images*/
div.gallery {
	position: relative;
	border: 1px solid #ccc;
	width: 250px;
	height: 250px;
	object-fit: contain;
}

.copy-img-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0.85rem;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.copy-img-btn:hover {
	background-color: rgba(60, 199, 85, 0.9);
	transform: scale(1.08);
}

.copy-img-btn:disabled {
	cursor: wait;
	opacity: 0.7;
}

.copy-img-btn-success {
	background-color: rgba(40, 167, 69, 0.9) !important;
}

.copy-img-btn-error {
	background-color: rgba(220, 53, 69, 0.9) !important;
}

div.gallery:hover {
	border: 3px solid #88bb14;
}

div.gallery img {
	object-fit: contain;
}

.responsive {
	padding: 6px;
	float: left;
	width: 24.99999%;
	object-fit: contain;
}



@media only screen and (max-width: 1080px) {
	.responsive {
		width: 49.99999%;
		margin: 6px 0;
		object-fit: contain;
	}
	div.gallery {
		border: 1px solid #ccc;
		width: 220px;
		height: 220px;
		object-fit: contain;
	}
}

@media only screen and (max-width: 500px) {
	.responsive {
		width: 100%;
		object-fit: contain;
	}
	div.gallery {
		border: 1px solid #ccc;
		width: 300px;
		height: 300px;
		object-fit: contain;
	}
}

/**/



/* CUSTOM RADIO & CHECKBOXES*/
 /* Customize the label (the container) */
.checkbox-img-gallery {
	display: block;
	position: relative;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	object-fit: contain;
}
  
  /* Hide the browser's default checkbox */
.checkbox-img-gallery input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
  
  /* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 30px;
	width: 30px;
	background-color: #e9e9e9;
}
  
  /* On mouse-over, add a grey background color */
.checkbox-img-gallery:hover input ~ .checkmark {
	background-color: #88bb14;
}
  
  /* When the checkbox is checked, add a blue background */
.checkbox-img-gallery input:checked ~ .checkmark {
	background-color: #88bb14;
}

.checkbox-img-gallery input:checked ~ img {
	border: 4px solid #88bb14;
	object-fit: contain;
}

  /* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
  
  /* Show the checkmark when checked */
.checkbox-img-gallery input:checked ~ .checkmark:after {
	display: block;
}
  
  /* Style the checkmark/indicator */
.checkbox-img-gallery .checkmark:after {
	left: 12px;
	top: 8px;
	width: 7px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
} 

/*Style variations of products*/


.show-variations .item-variation {
	display: inline-block;
	width: 60px;
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid #ececec;
	position: relative;
	text-decoration: none;
}

.show-variations .item-variation:hover {
	border: 2px solid #88bb14;
	color: #88bb14 !important;
}


.show-variations .item-variation img {
	display: block;
	max-width: 100%;
	height: auto;
}

.dropdown-item {
	padding: .20rem 1.5rem !important;
}

/*Custom slider for mobile device*/

@media only screen and (max-width: 1080px) {
	.carousel-inner {
		width:100%;
		max-height: 800px !important;
		}
}

/*Admin product category tree (expand/collapse)*/

.cat-node {
	position: relative;
}

.cat-node > .custom-control {
	padding: 4px 6px 4px 0;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.cat-node > .custom-control:hover {
	background-color: #eef8f0;
}

.cat-toggle {
	color: #88bb14;
	font-size: 15px;
	border-radius: 3px;
	transition: color 0.15s ease, transform 0.15s ease;
}

.cat-toggle:hover {
	color: #2FAE49;
}

.cat-toggle .fa-minus-square {
	color: #403e40;
}

/* indentation guide so nested levels are easy to scan */
.cat-sub {
	border-left: 1px dashed #dcdcdc;
	margin-left: 8px;
	padding-left: 10px;
	margin-top: 2px;
	margin-bottom: 2px;
}

.cat-node[data-level="0"] {
	margin-bottom: 2px;
}

.cat-node[data-level="0"] > .custom-control .custom-control-label {
	font-weight: 600;
}

.cat-node .custom-control-label {
	cursor: pointer;
}

/* keep the checkbox/toggle/label neatly aligned on one line */
.cat-node .custom-control.custom-checkbox.d-flex {
	min-height: auto;
}

.cat-node .custom-control-input {
	position: static;
	margin-right: 6px;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	accent-color: #88bb14;
}

/* Highlight the whole row when its checkbox is checked, so a selected
   category is obvious at a glance even in a long/nested tree. The class
   is toggled by JS (see edit.php) since :has() support can't be relied on. */
.cat-node > .custom-control.cat-selected {
	background-color: #e4f6e8;
	border-left: 3px solid #88bb14;
	padding-left: 3px;
}

.cat-node > .custom-control.cat-selected .custom-control-label {
	color: #88bb14;
	font-weight: 700;
}

/* still show root categories in bold even when unselected, but selected
   styling above takes priority via the color/weight already set */
.cat-node[data-level="0"] > .custom-control.cat-selected .custom-control-label {
	color: #88bb14;
}

/* Explicit checkmark badge for a selected category — shown in addition to
   the row highlight, since a highlight alone can be missed at a glance. */
.cat-check {
	display: none;
	margin-left: 8px;
	color: #ffffff;
	background-color: #88bb14;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	font-size: 10px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cat-node .custom-control.cat-selected .cat-check {
	display: inline-flex;
}

/* Category filter dropdown (product list page) */
.cat-filter-dropdown {
	position: relative;
}

.cat-filter-dropdown .btn-outline-secondary {
	background-color: #fff;
	border-color: #ced4da;
	color: #495057;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cat-filter-dropdown .btn-outline-secondary:hover,
.cat-filter-dropdown .btn-outline-secondary:focus {
	border-color: #88bb14;
	box-shadow: 0 0 0 0.2rem rgba(60, 199, 85, 0.25);
	color: #495057;
	background-color: #fff;
}

.cat-filter-menu {
	width: 100%;
	min-width: 280px;
	max-height: 340px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Batch product operations (product list page) */
.batch-actions-bar {
	background-color: #e4f6e8;
	border: 1px solid #88bb14;
	border-radius: 4px;
}

tr.product-row-selected {
	background-color: #eef8f0 !important;
}

/* Category tree search (product edit page + product list filter dropdown) */
.cat-search {
	margin-bottom: 8px;
}

.cat-search input:focus {
	border-color: #88bb14;
	box-shadow: 0 0 0 0.2rem rgba(60, 199, 85, 0.25);
}

.cat-match {
	background-color: #d8f5e0;
	font-weight: 700;
	border-radius: 2px;
	padding: 0 1px;
}

.cat-node .custom-control-label::before,
.cat-node .custom-control-label::after {
	display: none;
}

.navbar-light .navbar-nav .nav-link {
  color:#fff !important;
}

.navbar-light .navbar-toggler {
  color: #fff !important;
  border-color: rgba(0,0,0,.1);
}

/* Footer opening-hours widget: theme's own defaults (css/style.css) assume it sits
   in a wide overlapping card, not a narrow footer column - override the negative
   margin/padding for that context and use the theme's accent color instead of its
   default red border. */
.ltn__footer-timeline-widget {
	margin-top: 0 !important;
	padding: 0 0 15px !important;
	border-bottom: 3px solid var(--ltn__secondary-color) !important;
}

.ltn__footer-timeline-widget ul li {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
}

.ltn__footer-timeline-widget ul li span {
	float: none !important;
}

/* Header "Categories" mega-menu (shop_menu.php, li.menu-icon > ul.sub-menu and its
   nested flyout <ul>s): theme default item padding (css/style.css ~4072, 12px top/
   bottom) is too roomy for a list this long on desktop - tighten it up. */
.ltn__main-menu li > ul,
.ltn__main-menu .sub-menu {
	padding: 8px 0 !important;
}

.ltn__main-menu li ul li,
.ltn__main-menu .sub-menu li {
	padding: 6px 20px 6px 25px !important;
	line-height: 1.2 !important;
}

/* The theme hides closed dropdowns with visibility:hidden (css/style.css ~4063),
   which still occupies its position:absolute layout box - with this many categories
   that closed, invisible box is taller than the rest of the page and inflates
   document.scrollHeight, showing as blank space scrollable past the footer. Collapse
   it to zero height only while closed; on hover, restore overflow:visible (the
   theme's own default) so the open menu - including the sideways flyout
   sub-sub-menus - renders exactly as before, just no longer padding out the page. */
.ltn__main-menu li > ul,
.ltn__main-menu .sub-menu {
	max-height: 0 !important;
	overflow: hidden !important;
}

.ltn__main-menu li:hover > ul,
.ltn__main-menu li:hover > .sub-menu {
	max-height: 2000px !important;
	overflow: visible !important;
}