/*===========================CHECKBOX CSS===================================*/

.simple-scrolltable {
    scrollbar-color: auto !important;
}

.custom-control-label::before {
    width: 18px !important;
    height: 18px !important;
    background-color: var(--grey-white) !important;
    border: 1px solid var(--grey-g400) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    transition: all 0.3s ease-in-out;
}

.custom-control-label:hover::before {
    background-color: var(--grey-g200) !important;
    border: 1px solid var(--grey-black) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--blue-primary) !important;
    border-color: var(--blue-primary) !important;
}

.custom-control-input:checked:hover ~ .custom-control-label::before {
    background-color: var(--blue-primary-hov) !important;
    border-color: var(--blue-primary-hov) !important;
}

.custom-control-input:checked ~ .custom-control-label::after {
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
    border-color: var(--grey-g400) !important;
}

.custom-control-input:focus:checked ~ .custom-control-label::before {
    border-color: var(--blue-primary) !important;
}

/*===========================LIST VIEW CSS===================================*/

.list-group .nav-link .list-group-item {
    border-left: 3px solid var(--grey-border);
    font-weight: var(--fw-medium);
    transition: all 100ms ease-in;
}

.list-group .list-group-item .nav-link:hover {
    border-left: 3px solid var(--blue-primary);
}

.list-group .list-group-item.active {
    color: var(--grey-black) !important;
    background-color: transparent !important;
    border-left: 3px solid var(--blue-primary);
}

.list-group-item {
    color: var(--clr-accent);
    border: 0;
}

.list-group-item.active {
    color: inherit !important;
    background-color: transparent !important;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

/*==============================Filter option button============================*/

.filter-option {
    width: 100%;
    height: 100%;
    padding: 8px 16px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    color: var(--gray-black);
    font-family: var(--font-main); 
    font-size: 14px;
    font-weight: var(--fw-regular);
    line-height: 16px;
    word-wrap: break-word;
    cursor: pointer;
}

/* +========================================Color-picker Product Selector and Step-by-Step guide====================================*/

.color-radio input[type="radio"] {
    display: none !important;
}

.color-radio .color-lov {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-lov {
	margin-right: 5px;
}

.color-lov .dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--grey-border);
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
}

.color-lov.gray .dot {
    background: var(--picker-gray);
}

.color-lov.black .dot {
    background: var(--picker-black);
}

.color-lov.white .dot {
    background: var(--grey-white);
}

.color-lov.blue .dot {
    background: var(--picker-blue);
}

.color-lov.purple .dot {
    background: var(--picker-purple);
}

.color-lov.cyan .dot,
.color-lov.transparent.cyan .dot {
    background: var(--picker-cyan);
}

.color-lov.pink .dot {
    background: var(--picker-pink);
}

.color-lov.red .dot {
    background: var(--picker-red);
}

.color-lov.orange .dot {
    background: var(--picker-orange);
}

.color-lov.yellow .dot {
    background: var(--picker-yellow);
}

.color-lov.red-blue .dot {
  background: linear-gradient(
    135deg,
    var(--picker-red) 50%,
    var(--picker-blue) 50%
  );
}

.color-lov.green-red .dot {
  background: linear-gradient(135deg, var(--picker-green) 50%, var(--picker-red) 50%);
}

.color-lov.yellow-red .dot {
  background: linear-gradient(135deg, var(--picker-yellow) 50%, var(--picker-red) 50%);
}

.color-lov.red-orange .dot {
  background: linear-gradient(135deg, var(--picker-red) 50%, var(--picker-orange) 50%);
}

.color-lov.green-blue .dot {
  background: linear-gradient(135deg, var(--picker-green) 50%, var(--picker-blue) 50%);
}

.color-lov.yellow-blue .dot {
  background: linear-gradient(135deg, var(--picker-yellow) 50%, var(--picker-blue) 50%);
}

.color-lov.blue-orange .dot {
  background: linear-gradient(135deg, var(--picker-blue) 50%, var(--picker-orange) 50%);
}

.color-lov.yellow-green .dot {
  background: linear-gradient(135deg, var(--picker-yellow) 50%, var(--picker-green) 50%);
}

.color-lov.green-orange .dot {
  background: linear-gradient(135deg, var(--picker-green) 50%, var(--picker-orange) 50%);
}

.color-lov.yellow-orange .dot {
  background: linear-gradient(135deg, var(--picker-yellow) 50%, var(--picker-orange) 50%);
}

.color-radio .selected .dot {
    border-color: var(--gray-black);
    box-shadow: var(--shadow-ring-sm);
}

.color-lov.transparent.white .dot {
    background: var(--picker-trans-white);
}

.color-lov.transparent.gray .dot {
    background: var(--picker-trans-gray);
}

.color-lov.transparent.pink .dot {
    background: var(--picker-trans-pink);
}

.color-lov.transparent.green .dot {
    background: var(--picker-trans-green);
}

.color-lov.transparent.lime .dot {
    background: var(--picker-lime);
}

.color-lov.transparent.none .dot {
    background-image: url("checkers.png");
    background-repeat: repeat;
    background-size: 8px 8px; 
    background-position: center;
}

.color-radio .selected .dot,
.color-radio .active .dot,
.color-radio .checked .dot,
.color-radio .bpm-selected .dot {
    border-color: var(--gray-black);
    box-shadow: var(--shadow-ring-md);
}

.color-radio input[type="radio"]:checked + .color-lov .dot {
    border-color: var(--blue-focus);
    box-shadow: var(--shadow-ring-lg);
}

/*==================================PRODUCT SELECTOR CSS============================*/
.product-selector-container {
    height: calc(85vh - 55px);
    overflow-y: auto;
}

.selector-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 0px;
    width: 100%;
    background-color: var(--grey-white);
}

.selector-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.selector-title {
    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 26px;
    letter-spacing: 0.7px;
    color: var(--grey-black);
    margin: 0;
}

.selector-subtitle {
    font-size: 14px;
    font-weight: var(--fw-medium);
    line-height: 24px;
    letter-spacing: 0.42px;
    color: var(--grey-black);
    margin: 0;
}

.selector-divider {
    height: 1px;
    background-color: var(--grey-g300);
    width: 100%;
    margin: 0;
}

.selector-section .ss-main .ss-single-selected .placeholder {
    overflow: visible;
    font-size: 14px;
    font-style: normal;
    font-weight: var(--fw-medium);
    line-height: 24px;
    letter-spacing: 0.42px;
}

.selector-section .ss-main .ss-single-selected .placeholder .ss-disabled {
    color: var(--grey-g600);
}

.selector-container .row {
    margin: 0;
}

.selector-container .col-12 {
    padding: 0;
}

.selector-section .form-control > div.ss-single-selected {
    padding: 23px;
    background-color: var(--grey-white);
    outline: 1px solid var(--grey-g400);
    outline-offset: -1px;
    border: none;
    border-radius: 12px;
    color: var(--grey-black);
    font-size: 14px;
    font-weight: var(--fw-medium);
    line-height: 24px;
    letter-spacing: 0.42px;
}

.selector-suggestion-card {
    background-color: var(--grey-bg);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.suggestion-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.text-code {
    font-size: 12px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.36px;
}

.text-product-name {
    font-size: 20px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.6px;
    line-height: 1.2;
}

.text-desc {
    font-size: 14px;
    color: var(--grey-desc);
    font-weight: var(--fw-medium);
}

.btn-refresh {
    box-shadow: none;
}

.btn-selector-primary {
    background-color: var(--orange-primary);
    color: var(--grey-white) !important;
    border-radius: 999px;
    padding: 16px 20px;
    font-weight: var(--fw-bold);
    font-size: 14px;
    border: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-selector-primary:hover {
    opacity: 0.9;
    color: var(--grey-white);
}


/* ****************************** Status ROADMAP ****************************/ 

.status-timeline-vertical {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.status-timeline-vertical .step {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.status-timeline-vertical .step::after {
    content: "";
    position: absolute;
    left: 6px;
    top: calc(100% + 2px);
    width: 2px;
    height: 20px;
    background: var(--clr-bluegray-25);
}

.status-timeline-vertical .step:last-child::after {
    display: none;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--clr-bluegray-25);
    background: var(--grey-white);
}

.step.travelled .dot {
    background: var(--clr-accent-light);
    border-color: var(--clr-accent);
}

.step.active .dot {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
}

.step.canceled .dot {
    background: var(--clr-pink-45);
    border-color: var(--clr-pink-65);
}

.status-timeline span {
    font-size: 12px;
    margin-top: 6px;
    white-space: nowrap;
    color: var(--clr-bluegray-65);
}

.status-cancelled .step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.status-cancelled span {
    margin-top: 0 !important;
}

.step.travelled::after {
    background: var(--clr-accent);
}

.tabs-container .nav-link {
    border-left: 2px solid var(--grey-border);
    font-weight: var(--fw-medium);
    transition: all 100ms ease-in;
}

.tabs-container .nav-link:hover,
.tabs-container .nav-link.active {
    border-left: 2px solid var(--blue-primary);
}

/* ======================================= TOAST NOTIFICATIONS ==================================== */

.modal-dialog:has(.delete-toast) {
	position: fixed !important;
	top: 7rem !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	margin: 0 !important;
	width: 100%;
	max-width: 100% !important;
	pointer-events: none !important;
}

.modal-content:has(.delete-toast) {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	pointer-events: auto !important;
}

.modal-body:has(.delete-toast) {
	background-color: transparent !important;
}

.modal-content:has(.delete-toast) .modal-header {
	display: none !important;
}

.toast-container-row:has(.delete-toast),
.modal-body:has(.delete-toast) .toast-container-row {
	background: transparent !important;
	display: flex !important;
	justify-content: center;
	margin: 0 !important;
	width: 100%;
}

.delete-toast {
	background: var(--blue-primary-hov) !important;
	color: var(--grey-white) !important;
	border-radius: 999px !important;
	padding: 12px 12px 12px 24px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 24px;
	width: fit-content !important;
	box-shadow: none;
	font-family: var(--font-main);
}

.delete-toast .delete-text {
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.03em;
	white-space: nowrap;
	font-weight: var(--fw-medium);
}

.delete-toast .order-number {
	font-weight: var(--fw-bold);
}

.delete-toast .actions-group {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.delete-toast .close-wrap {
	transition: all 0.3s ease-in-out;
	border-radius: 999px;
	padding: 6px;
}

.delete-toast .close-wrap:hover {
	background-color: var(--blue-toast-hover) !important;
}

.delete-toast .close-btn {
	background: transparent !important;
	border: none !important;
	color: var(--grey-white) !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: unset !important;
	transition: all 0.3s ease-in-out;
}

.delete-toast .close-btn:hover {
background-color: var(--blue-toast-hover) !important;
}

.delete-toast .close-btn i {
font-size: 16px;
}

/* View Link Styles */
.delete-toast .view-wrap {
	transition: all 0.3s ease-in-out;
	border-radius: 999px;
	padding: 10px 12px;
}

.delete-toast .view-wrap:hover {
	background-color: var(--blue-toast-hover) !important;
}

.delete-toast .view-link {
	color: var(--grey-white) !important;
	font-weight: var(--fw-bold) !important;
	font-size: 14px;
	text-decoration: none !important;
	cursor: pointer;
}

.delete-toast .view-link:hover {
	opacity: 0.8;
}

/* === NAVBAR ACTION BUTTONS === */

.nav-actions-group {
	display: inline-flex;
	align-items: center;
}

.nav-actions-group .nav-circle-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--white-alpha-15);
	background-color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0;
	cursor: pointer;
	margin-right: 8px;
	vertical-align: middle;
	transition: background-color 0.2s ease-in-out;
}

.nav-actions-group .nav-circle-btn:last-child {
	margin-right: 0;
}

.nav-actions-group .cart-icon {
	width: 22px;
	height: auto;
}

html[data-theme="specsavers"] .icon-inverted {
	filter: invert(1);
}

.nav-actions-group .cart-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: var(--blue-primary);
	border-radius: 999px;
	padding: 4px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: none;
	min-width: 20px;
	min-height: 20px;
	box-sizing: border-box;
}

.nav-actions-group .cart-text {
	color: var(--grey-white);
	font-size: 12px;
	font-weight: var(--fw-medium);
	font-family: var(--font-main);
	line-height: 12px;
	letter-spacing: 0.42px;
	text-align: center;
	min-width: 12px;
}

.navbar-company .ss-option,
.navbar-company .ss-main .placeholder {
	white-space: pre-line !important;
	line-height: 1.4em;
}

.navbar-company .dropdown-menu {
	position: absolute !important;
	z-index: 9999 !important;
}

.navbar-company .ui-dropdown-panel {
	position: absolute !important;
	z-index: 9999 !important;
}

.navbar-company .combobox-dropdown {
	position: absolute !important;
	z-index: 9999 !important;
}

.navbar-company .ss-main .ss-single-selected .ss-deselect {
	background-color: transparent !important;
}

.navbar-company .ss-content .ss-list .ss-option.ss-highlighted,
.navbar-company .ss-content .ss-list .ss-option:hover {
	color: #19171A;
	background-color: #EEF1F2;
}

.navbar-company .ss-content .ss-list .ss-option.ss-highlighted,
.navbar-company .ss-content .ss-list .ss-option {
	color: #19171A;
}

.navbar-company .ui-dark .ss-single-selected .placeholder {
	color: var(--text-light);
}

.navbar-company .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
	color: #19171A;
	background-color: #E7EBF3;
}

.navbar-company .ss-content.ss-open {
	border-radius: 8px;
	z-index: 9999;
}

.navbar-company select.company-select + div .ss-single-selected,
.navbar-company select.company-select + .ss-main:hover {
	border-color: var(--white-alpha-15) !important;
	background-color: transparent !important;
	border-radius: 12px;
}

.navbar-company .company-select .ss-single-selected {
	padding: 0px 12px;
}

.navbar-company .company-select + .ss-main {
	min-width: 240px !important;
}

.navbar-company .company-select + .ss-main .ss-single-selected {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.navbar-company .ss-option .align-items-start {
	display: inline !important;
}

.navbar-company .ss-option span {
	display: inline;
	white-space: nowrap;
}

.navbar-company .ss-option span:first-child::after {
	content: " - ";
}

.navbar-company .ss-option span:first-child {
	margin-right: 0;
}

.navbar-company .ss-option {
	padding: 12px 16px !important;
}

.navbar-company .ss-main .ss-deselect {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}