/*
Theme Name: Twenty Twenty-Four Child
Theme URL: 
Description: Twenty Twenty-Four Child Theme
Author: 
Author URL: 
Template: twentytwentyfour
Version: 1.0.0
Text Domain: twentytwentyfour-child
*/


/* ALL */
	/* Add smooth scroll to scroll to anchors instead of jump */
	html {
		scroll-behavior: smooth;
	}



/* HEADER */
	/* Fix header navigation menu responsiveness to toggle at set custom px width */
	body .wp-block-navigation__responsive-container-open:not(.always-shown) { 
		display: block !important;
	}

	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { 
		display: none !important;
	}

	@media (min-width: 800px) {
		body .wp-block-navigation__responsive-container-open:not(.always-shown) {
			display: none !important; 
			;
		}

		body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
			display: block !important; 
		}
	}



/* LOCKET SIZE SLECTION */
	/* Overlap customizer button over gallery carrousel */
	.tdb-locket-selection-option-div { 
		position: relative;
	}

	.tdb_locket_size_selection_customizer_button { 
		position: absolute;
		z-index: 1; 
		opacity: 0;
		width: 100%; 
		height: 100%;
	}




/* PRODUCT CUSTOMIZER */
	/* Tooltip - change background color and text alignment */
	.tippy-box {
		opacity: 0.85;
		text-align: justify;
	} 

	.tippy-content {
		background-color: gray;
	} 

	/* Make the active layer selection sticky when browsing */
	li.layers-list-item.active button.layer-item {
		position: sticky!important;
		top: -5%;
		z-index: 9999;
	}

	/* Change background color of layers titles but not for content choices */
	.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li button {
		background: #dedede!important;
	}

	.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li > button.choice-item {
		background: transparent!important;
	}

	/* Maintain black color of choices text when on hoover */
	.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices li.display-mode-dropdown .layer_choices.display-mode-dropdown > .choices-list li button.choice-item:hover, .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices li.display-mode-dropdown .layer_choices.display-mode-dropdown > .choices-list li button.choice-item:focus, .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.display-mode-dropdown .layer_choices.display-mode-dropdown > .choices-list li button.choice-item:hover, .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.display-mode-dropdown .layer_choices.display-mode-dropdown > .choices-list li button.choice-item:focus {
		color: black!important;
	}

	.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices li.display-mode-dropdown .layer_choices.display-mode-dropdown > .choices-list li button.choice-item:hover span.choice-price, .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices li.display-mode-dropdown .layer_choices.display-mode-dropdown > .choices-list li button.choice-item:focus span.choice-price {
		color: #777!important;
	}

	/* Shrink heights of layer titles */
	.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li button {
		padding-top: 0.5em!important;
		padding-bottom: 0.5em!important;
		border-radius: 3px!important; 
		border: 0px!important; 
	}

	.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li {
		margin-bottom: 0.4em!important;
	}

	/* Shrink heights of layer drop-down choices */
	.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices li.display-mode-dropdown {
		padding: 0em!important;
	}

	/* Add left padding to drop-down layer titles to be aligned with rest */
	.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices li.display-mode-dropdown > button.layer-item {
		padding-left: 60px !important;
	}

	/* Make image not larger than the layer container (fixes too big image on desktop view) */
	i.selected-choice-image img {
		max-height: 34px;
	}

	/* Change font and indicators of active layer titles */
	button.layer-item:hover {
		color: black!important;
	}

	button.layer-item:hover:after {
		border-color: black!important;
	}

	/* Change colors of add to cart button */
	.configurator-add-to-cart {
		background-color: #000000 !important;
		color: #ffffff !important;
	}

	/* Change price text size and alignment */
	span.choice-price {
		font-size: 0.8em;
		text-align: center; 
	}

	/* Uppercase for layers names */
	.layer-name {
		text-transform: uppercase;
	}

	/* Out of stock products not clickable and with strikethrough */
	li.choice.tdb_item_selection_out_of_stock {
		pointer-events: none;
		text-decoration: line-through;
	}

	/* Set font for customizer options */
	span.text.choice-name {
		text-transform: uppercase;
		font-size: small;
	}



/* PRODUCT CUSTOMIZER - Fix disappearing reset button for less than 720 width */
	@media (max-width: 720px) {
		.mkl-footer--action-button span {
			display: block!important;
		}
	}


/* PRODUCT CUSTOMIZER - RESPONSIVE CUSTOMIZATIONS FOR TABLET */
	@media (min-width: 660.01px) and (max-width: 760px) {
		/* Maintain narrower selection part to the right to give more space to viewer */
		.mkl_pc_viewer {
			right: 305px!important;
		}

		.mkl_pc_toolbar {
			width: 330px!important;
		}

	}



/* PRODUCT CUSTOMIZER - RESPONSIVE CUSTOMIZATIONS FOR MOBILE */
	@media (max-width: 660px) {
	/* PRODUCT CUSTOMIZER MOBILE - CHARMS SELECTION */
		/* Make 3 columns for charms selection */
		.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices .choice .choices-list--children li {
			width: calc(33% - .6em);
		}

		/* Make bigger the viewer section by increasing height of view section and moving down the choices selector section */
		.mkl_pc .mkl_pc_container .mkl_pc_viewer {
			bottom: 50% !important;
		}

		.mkl_pc .mkl_pc_container .mkl_pc_toolbar {
			top: 50% !important;
		}


	/* PRODUCT CUSTOMIZER MOBILE - BOTTOM PART WITH PRICE, ADD TO CART ETC. */
		/* Decrease width of price and quantity+add to cart button containers to fit in one line */
		.mkl_pc .mkl_pc_container .form.form-cart .pc-total-price--container {
			width: 15% !important; 
		}

		.mkl_pc .mkl_pc_container .form.form-cart .pc_configurator_form {
			width: 70% !important; 
		}

		/* Decrease width of quantity box and align it center */
		.mkl_pc .mkl_pc_toolbar .form-cart .pc_configurator_form .qty {
			width: 20% !important;
			text-align: center !important;
		}

		.mkl_pc .mkl_pc_toolbar .form-cart .pc_configurator_form .quantity {
			text-align: center !important;
		}

		/* Modify add to cart button */
		.mkl_pc .mkl_pc_toolbar .form-cart .pc_configurator_form .configurator-add-to-cart {
			font-size: 17px !important;
			width: 300px; 
			height: 50px; 
		}

		button.primary.button.btn.btn-primary.wp-element-button.configurator-add-to-cart {
			padding-left: 0.1rem; 
			padding-right: 0.1rem; 
			padding-top: 0.1rem; 
			padding-bottom: 0.1rem; 
		}


	/* PRODUCT CUSTOMIZER MOBILE - HEADER */
		/* Change header background and font color */
		.mkl_pc .mkl_pc_container .mkl_pc_toolbar > header {
			background: #c3c3c3 !important;
		}

		.mkl_pc .mkl_pc_container .mkl_pc_toolbar > header h3 {
			color: #000000 !important;
		}

		.mkl_pc .mkl_pc_container .mkl_pc_toolbar > header > .cancel::before, .mkl_pc .mkl_pc_container .mkl_pc_toolbar > header > .cancel::after {
			background: #000000 !important;
		}


	/* PRODUCT CUSTOMIZER MOBILE - TOOLTIP */
		/* Tooltip - change position to appear always at the top center of the configurator */
		[data-tippy-root] {
			position: fixed!important;
			top: 40px!important;
			left: 50%!important;
			width: 70%;
			transform: translateX(-50%)!important;
		}

		/* Tooltip - hide arrow in mobile view */
		.tippy-arrow {
			display: none;
		}


	}



/* SINGLE PRODUCT PAGE - LOCKETS WITH CUSTOMIZER */
	/* Hide price for lockets sigle page before configurator */
	.postid-5246 .price {
		display: none;
	}

	.postid-5319 .price {
		display: none;
	}



/* ORDERING PROCESS - CHECKOUT */
	/* Checkout "Buy later" button sticky below */
	.wp-block-buttons.buy-later-button {
		position: fixed;
		bottom: 1px;
		right: 1px;
		z-index: 100;
	}

	/* Hide cart messages in checkout page */
	.page-id-55 .woocommerce-notices-wrapper {
		display: none;
	}

	button#place_order {
		background-color: #000000 !important;
		color: #ffffff !important;
	}

	/* Hide SKU code from Product Configurator in cart item */
	.variation span.sku {
		display: none;
	}

	/* Hide Paypal quick payment that appears at the top of checkout form */
	.wp-block-woocommerce-checkout-express-payment-block {
		display: none;
	}
	
	.woocommerce-checkout #payment div.payment_box .form-row-first, .woocommerce-checkout #payment div.payment_box .form-row-last, .woocommerce-checkout #payment div.payment_box .form-row-wide {
		padding-left: 0px; 
		padding-right: 0px; 
	}

	.woocommerce-checkout #payment div.payment_box .form-row-first, .woocommerce-checkout #payment div.payment_box .form-row-last {
		width: 45%; 
	}



/* AI ASSISTANT */
	/* Prompt input box */
	.tdb-ai textarea {
		color: #555555;
		background-color: #ffffff;
		border-color: #bfc3c8;
		border-width: 1px;
		border-style: solid;
		border-radius: 4px;
		width: 100%;
		max-width: 100%;
		font-size: 14px;
		padding-top: 6px;
		padding-right: 10px;
		padding-bottom: 6px;
		padding-left: 10px;
		box-sizing: border-box;
		outline: none;
		font-weight: normal;
	}