/*=========================================================
PHIUM ESSENCE
FORMS
=========================================================*/


/*=========================================================
COMMON INPUTS
=========================================================*/

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wpforms-form input,
.wpforms-form textarea,
.wpforms-form select{

    width:100%;

    min-height:54px;

    padding:14px 18px;

    background:#fff;

    border:1px solid var(--phium-border);

    border-radius:12px;

    color:var(--phium-text);

    font-size:15px;

    transition:all .3s ease;

    box-shadow:none;

}


/*=========================================================
TEXTAREA
=========================================================*/

textarea{

    min-height:160px;

    resize:vertical;

}


/*=========================================================
PLACEHOLDER
=========================================================*/

::placeholder{

    color:#9a8b81;

    opacity:1;

}


/*=========================================================
FOCUS
=========================================================*/

input:focus,
textarea:focus,
select:focus{

    border-color:var(--phium-primary);

    outline:none;

    box-shadow:0 0 0 4px rgba(194,139,104,.12);

}


/*=========================================================
LABEL
=========================================================*/

label{

    display:block;

    margin-bottom:8px;

    font-weight:500;

    color:var(--phium-heading);

}


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

input[type="checkbox"]{

    accent-color:var(--phium-primary);

}


/*=========================================================
SELECT
=========================================================*/

select{

    appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238C5A3D' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 5h10z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 15px center;

    padding-right:40px;

}


/*=========================================================
SEARCH
=========================================================*/

.search-form{

    display:flex;

    gap:10px;

}

.search-form input{

    flex:1;

}


/*=========================================================
WPFORMS
=========================================================*/

.wpforms-container{

    width:100%;

}

.wpforms-field{

    margin-bottom:18px;

}

.wpforms-submit{

    width:100%;

}


/*=========================================================
WOOCOMMERCE CHECKOUT
=========================================================*/

.woocommerce form .form-row{

    margin-bottom:18px;

}

.select2-container--default .select2-selection--single{

    height:54px;

    border-radius:12px;

    border:1px solid var(--phium-border);

}

.select2-container--default .select2-selection--single .select2-selection__rendered{

    line-height:54px;

}

.select2-container--default .select2-selection--single .select2-selection__arrow{

    height:54px;

}


/*=========================================================
LOGIN / REGISTER
=========================================================*/

.woocommerce-form-login,
.woocommerce-form-register{

    background:#fff;

    padding:40px;

    border-radius:16px;

    border:1px solid var(--phium-border);

}


/*=========================================================
COUPON
=========================================================*/

.checkout_coupon{

    margin-bottom:30px;

}


/*=========================================================
REVIEWS
=========================================================*/

.comment-form textarea{

    min-height:180px;

}


/*=========================================================
ERRORS
=========================================================*/

input.error,
textarea.error{

    border-color:#d32f2f;

}


/*=========================================================
SUCCESS
=========================================================*/

.woocommerce-message{

    border-left:4px solid var(--success);

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:768px){

input,
textarea,
select{

font-size:16px;

}

}


/*=========================================================
PASSWORD VISIBILITY ICON — LOCAL SVG
Single source of truth for WooCommerce and Blocksy forms.
=========================================================*/

.password-input {
	position: relative !important;
	display: block !important;
	width: 100% !important;
}

.password-input input.input-text,
.password-input input[type="password"],
.password-input input[type="text"] {
	padding-right: 64px !important;
}

/*
 * Use the local SVG as the toggle element's own background.
 * All theme and WooCommerce pseudo-icons are disabled below.
 */
.password-input .show-password-input {
	position: absolute !important;
	top: 50% !important;
	right: 18px !important;
	bottom: auto !important;
	left: auto !important;

	display: block !important;

	width: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;

	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: visible !important;

	appearance: none !important;
	-webkit-appearance: none !important;

	background-color: transparent !important;
	background-image: url("../../images/eye.svg") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 22px 22px !important;

	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;

	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	white-space: nowrap !important;

	opacity: 1 !important;
	visibility: visible !important;

	transform: translateY(-50%) !important;

	-webkit-mask: none !important;
	mask: none !important;
	filter: none !important;

	cursor: pointer !important;
	z-index: 10 !important;
}

.password-input
.show-password-input.display-password {
	background-image: url("../../images/eye-off.svg") !important;
}

/*
 * Prevent Blocksy, WooCommerce and icon-font pseudo-elements
 * from being rendered together with the local SVG.
 */
.password-input .show-password-input::before,
.password-input .show-password-input::after {
	position: static !important;

	display: none !important;

	width: 0 !important;
	height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	content: none !important;

	background: none !important;
	border: 0 !important;
	box-shadow: none !important;

	font-family: initial !important;
	font-size: 0 !important;
	line-height: 0 !important;

	opacity: 0 !important;

	transform: none !important;

	-webkit-mask: none !important;
	mask: none !important;
}

/*
 * Keep the icon stable when the toggle is hovered, focused
 * or pressed. The browser focus indicator remains on the
 * password field itself.
 */
.password-input .show-password-input:hover,
.password-input .show-password-input:focus,
.password-input .show-password-input:focus-visible,
.password-input .show-password-input:active {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;

	transform: translateY(-50%) !important;
}

.password-input
.show-password-input.display-password:hover,
.password-input
.show-password-input.display-password:focus,
.password-input
.show-password-input.display-password:focus-visible,
.password-input
.show-password-input.display-password:active {
	background-image: url("../../images/eye-off.svg") !important;
}