/**
 * ts-phone (intl-tel-input) compatibility with Bootstrap form-floating
 * The intl-tel-input wraps the input in .iti, breaking Bootstrap's direct child selectors
 * Structure: .ts-phone > .form-group > .input-holder.form-floating > .iti, label
 */

/* Ensure .iti takes full width in form-floating */
.ts-phone .form-floating .iti {
    display: block;
    width: 100%;
}

/* Match Bootstrap form-control height inside form-floating */
.ts-phone .form-floating .iti .iti__tel-input {
    height: calc(3.6rem + 4px);
    min-height: calc(3.6rem + 4px);
    padding: 1rem 1rem 1rem 3rem;
    line-height: 1.25;
}

/* Label: offset for flag area (~52px) so it doesn't overlap */
.ts-phone .form-floating > label {
    left: 52px;
    padding-left: 0;
}

/* Label when floating (focused or has value) - scale up position */
.ts-phone .form-floating > .iti:focus-within ~ label,
.ts-phone .form-floating:has(.iti__tel-input:not(:placeholder-shown)) > label,
.ts-phone .form-floating:has(.iti__tel-input:focus) > label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Input padding when label is floating */
.ts-phone .form-floating .iti:focus-within .iti__tel-input,
.ts-phone .form-floating .iti .iti__tel-input:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* Input placeholder transparent for floating label effect */
.ts-phone .form-floating .iti .iti__tel-input::placeholder {
    color: transparent;
}