/*
 * DS Text Field – shared floating label styles
 *
 * This module provides a Zara/Material-style floating label for any
 * WooCommerce text-like field that is wrapped in `.ds-text-field`.
 *
 * Markup expectation:
 *   <p class="form-row ...">
 *     <span class="ds-text-field">
 *       <input class="input-text" placeholder=" " ...>
 *       <label for="...">Label</label>
 *     </span>
 *   </p>
 *
 * The placeholder is set to a single space so `:placeholder-shown` can be
 * used to detect empty vs filled state without showing any visible text.
 */

.ds-text-field {
	position: relative;
	display: block;
	margin-top: 8px;
}

.ds-text-field input.input-text,
.ds-text-field textarea {
	display: block;
	/* Match checkout's bottom-line input visuals so My Account reuses the
	 * exact same look via this shared module. We mirror the key values from
	 * .ds-checkout-wrapper input.input-text in ds-checkout.css here. */
	width: 100% !important;
	padding: 8px 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	border-bottom: 1px solid #e0e0e0 !important;
	outline: none;
	font-size: 12px;
	letter-spacing: 1px !important;
	color: #333;
	transition: border-color 0.3s ease, color 0.2s ease;
}

.ds-text-field textarea {
	min-height: 72px;
}

/* Base label – sits inside the input line until focus/has-value */
.ds-text-field label {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin: 0;
    font-size: 11px;
    color: #999;     /* base grey – stays the same when floated */
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 400;
    pointer-events: none;
    line-height: 1;
    transition: all 0.18s ease;
}
.ds-text-field label[for="yith_birthday"] {
    line-height: 1 !important;
    top: 35%;
}

input.ywpar-birthday + span {font-size: 11px !important; color: #999 !important;}
/* Float label on focus or when the field has content.
 * We support both pure CSS (:placeholder-shown) and JS-driven state classes
 * so behaviour is robust across browsers and pre-filled/autofilled values.
 */
.ds-text-field input.input-text:focus ~ label,
.ds-text-field textarea:focus ~ label,
.ds-text-field input.input-text:not(:placeholder-shown) ~ label,
.ds-text-field textarea:not(:placeholder-shown) ~ label,
.ds-text-field.ds-is-focused label,
.ds-text-field.ds-has-value label {
	/* Float the label higher above the text without changing its size or colour */
	top: -20px;
	transform: none;
	font-size: 11px;
    text-transform: uppercase;
	color: #999;
}
.ds-text-field input.input-text:focus ~ label[for="yith_birthday"],
.ds-text-field textarea:focus ~ label[for="yith_birthday"],
.ds-text-field input.input-text:not(:placeholder-shown) ~ label[for="yith_birthday"],
.ds-text-field textarea:not(:placeholder-shown) ~ label[for="yith_birthday"],
.ds-text-field.ds-is-focused label[for="yith_birthday"],
.ds-text-field.ds-has-value label[for="yith_birthday"] {
    top: -15px;
}
/* Active line colour */
.ds-text-field input.input-text:focus,
.ds-text-field textarea:focus {
	border-bottom-color: #333;
}

/* Error state – WooCommerce adds .woocommerce-invalid to the parent .form-row */
.woocommerce-invalid .ds-text-field input.input-text,
.woocommerce-invalid .ds-text-field textarea {
	border-bottom-color: #d32f2f !important;
}

.woocommerce-invalid .ds-text-field label {
	color: #d32f2f !important;
}

/* Optional helper/error text area directly under the input line. If present,
 * this should be placed as a sibling element after .ds-text-field. */
.ds-text-field__messages {
	display: block;
	position: relative;
	margin-top: 4px;
	font-size: 10px;
	color: #999;
}

.ds-text-field__messages .error,
.ds-text-field__messages .ds-error-text {
	color: #d32f2f;
}

/* Hide legacy WooCommerce required asterisk inside labels that use the
 * `required_field` helper class. Validation still runs; this only removes
 * the visual "*" marker, e.g.:
 *   <label class="required_field">Postcode / ZIP <span class="required">*</span></label>
 */
label.required_field .required {
	display: none !important;
}

/* -------------------------------------------------
 * WooCommerce password fields – show/hide toggle
 * -------------------------------------------------
 * WooCommerce wraps password inputs in .password-input and injects a
 * <button class="show-password-input"> control. After DS reorders
 * fields into .ds-text-field, we keep that wrapper intact and simply
 * normalise its layout so the icon sits on the right edge of the
 * bottom border without any grey box styling.
 */

.woocommerce form .password-input {
	position: relative;
	display: block;
}

.ds-text-field .password-input input[type="password"] {
	/* Reserve room for the toggle icon on the right */
	padding-right: 32px;
}

.woocommerce form .password-input .show-password-input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0;
	margin: 0;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
}

/* Use the same SVG eye icon as core WooCommerce so the button is never
 * visually blank, even if the core stylesheet isn't loaded. */
.woocommerce form .password-input .show-password-input::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23777777"/></svg>');
}

.woocommerce form .password-input .show-password-input.display-password::before {
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23777777"/></svg>');
}

/* -------------------------------------------------
 * Login submit button – full-width CTA on login forms
 * ------------------------------------------------- */

.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__submit {
	display: block;
	width: 100%;
	margin-top: 12px;
}