/**
 * TaxTax Field Styles - Floating Label System
 *
 * @package TaxApplicationSystem
 */

/* Field wrapper */
.taxtax-field-wrapper {
    position: relative;
    display: block;
}

/* The field itself (input/textarea) */
.taxtax-field {
    width: 100% !important;
    padding: 11px 15px !important;
    border: 1px solid var(--primary-light) !important;
    border-radius: var(--radius-xl) !important;
    font-size: var(--text-m) !important;
    font-family: inherit !important;
    transition: all 0.3s !important;
    background-color: var(--white) !important;
    position: relative !important;
    z-index: 1 !important;
    color: var(--body-color);
    min-height: 5rem;
}

.taxtax-field:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    background-color: var(--white) !important;
}

.taxtax-field.wa-error {
    border-color: #FF0004 !important;
    background-color: var(--white) !important;
}

textarea.taxtax-field {
    resize: vertical !important;
    min-height: 5rem !important;
    height: 5rem;
}

/* Label and Placeholder Container */
.taxtax-label-placeholder-container {
    position: absolute;
    left: 1.5rem;
    top: 2.5rem;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 0.2s;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 2px 5px !important;
    border-radius: var(--radius-s);
    background: var(--white);
}

/* Floating Label */
.taxtax-label {
    font-size: calc(var(--text-m) * 1) !important;
    font-weight: 500 !important;
    color: var(--primary-semi-light) !important;
    transition: all 0.2s !important;
    background: transparent !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Required asterisk */
.taxtax-required {
    color: #FF0004 !important;
}

/* Placeholder */
.taxtax-placeholder {
    font-size: calc(var(--text-s) * 1) !important;
    color: var(--primary-semi-light)!important;
    transition: .2s all ease-in-out !important;
    opacity: 0 !important;
    line-height: 1 !important;
    margin-top: 1px !important;
}

/* State: Empty & Not Focused - Show both label and placeholder */
.taxtax-field:placeholder-shown ~ .taxtax-label-placeholder-container .taxtax-label {
    opacity: 1 !important;
}

.taxtax-field:placeholder-shown ~ .taxtax-label-placeholder-container .taxtax-placeholder {
    opacity: 1 !important;
}

/* State: Focused - Float label to top border, hide placeholder */
.taxtax-field:focus ~ .taxtax-label-placeholder-container {
    left: 2.5rem !important;
    top: 0 !important;
    transform: translateY(-50%) !important;
}

.taxtax-field:focus ~ .taxtax-label-placeholder-container .taxtax-label {
    font-size: calc(var(--text-m) * 0.9) !important;
    color: var(--primary) !important;
    background: var(--white) !important;
    margin: 0 !important;
}

.taxtax-field:focus ~ .taxtax-label-placeholder-container .taxtax-placeholder {
    display: none !important;
    opacity: 0 !important;
}

/* State: Has Value & Not Focused - Hide both */
.taxtax-field:not(:placeholder-shown):not(:focus) ~ .taxtax-label-placeholder-container {
    opacity: 0 !important;
}

/* Error message */
.wa-error-message {
    display: block;
    color: #FF0004;
    font-size: 13px;
    margin-top: 6px;
    font-weight: 400;
}