/**
 * // Updater info (must be valid json)
  [updater]{
  "version": 3.01,
  "force": false,
  "allowupdate": true,
  "minimumVersion": 0,
  "tags": ["core"]
  }[/updater]
 */

 /* ==========================================================================
   BLOCK: input-floating
   ========================================================================== */
.input-floating {
    position: relative;
    margin-bottom: 15px;
    display: inline-block; /* Default to inline-block so it hugs the input width */
}

/* The Element: Input */
.input-floating .input {
    padding-top: 18px; 
    padding-bottom: 4px;
    height: 48px; /* Force consistent height for the label to float inside */
    box-sizing: border-box;
}

/* The Element: Label */
.input-floating label {
    position: absolute;
    top: 0;
    left: 12px;
    height: 100%;
    padding: 14px 0;
    pointer-events: none;
    color: var(--placeholderColor, #888);
    transform-origin: 0 0;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out, color .2s ease-in-out;
}

/* The Magic: Floating State */
.input-floating .input:not(select):focus ~ label,
.input-floating .input:not(select):not(:placeholder-shown) ~ label,
.input-floating:has(select.input option:checked:not([value=""])) label {
    transform: scale(0.75) translateY(-8px);
    color: var(--primaryColor, #0b3759);
    opacity: 0.9;
}


/* ==========================================================================
   MODIFIERS
   ========================================================================== */

/* Width 100% Modifier */
.input-floating--w100 {
    display: block;
    width: 100%;
}
 .input-floating--primary .input {
    background-color: var(--primaryColor, #0b3759);
    color: #fff;
    border: 1px solid var(--primaryColorDark, #06233b);
}

.input-floating--primary label {
    color: rgba(255, 255, 255, 0.6); /* Faded white for resting placeholder */
}

.input-floating--primary .input:focus ~ label,
.input-floating--primary .input:not(:placeholder-shown) ~ label {
    color: #fff; /* Solid white when floating */
}

.input-floating--secondary .input-floating input {
    background-color: var(--secondaryColor, #0b3759);
    color: #fff;
    border: 1px solid var(--secondaryColorDark, #06233b);
}

.input-floating--secondary .input-floating label {
    color: rgba(255, 255, 255, 0.6); /* Faded white for resting placeholder */
}

.input-floating--secondary .input-floating input:focus ~ .input-floating label,
.input-floating--secondary .input-floating input:not(:placeholder-shown) ~ .input-floating label {
    color: #fff; /* Solid white when floating */
}

.input-floating--success .input-floating input {
    background-color: var(--successColor, #0b3759);
    color: #fff;
    border: 1px solid var(--successColorDark, #06233b);
}

.input-floating--success .input-floating label {
    color: rgba(255, 255, 255, 0.6); /* Faded white for resting placeholder */
}

.input-floating--success .input-floating input:focus ~ .input-floating label,
.input-floating--success .input-floating input:not(:placeholder-shown) ~ .input-floating label {
    color: #fff; /* Solid white when floating */
}

.input-floating--info .input-floating input {
    background-color: var(--infoColor, #0b3759);
    color: #fff;
    border: 1px solid var(--infoColorDark, #06233b);
}

.input-floating--info .input-floating label {
    color: rgba(255, 255, 255, 0.6); /* Faded white for resting placeholder */
}

.input-floating--info .input-floating input:focus ~ .input-floating label,
.input-floating--info .input-floating input:not(:placeholder-shown) ~ .input-floating label {
    color: #fff; /* Solid white when floating */
}

.input-floating--warning .input-floating input {
    background-color: var(--warningColor, #0b3759);
    color: #fff;
    border: 1px solid var(--warningColorDark, #06233b);
}

.input-floating--warning .input-floating label {
    color: rgba(255, 255, 255, 0.6); /* Faded white for resting placeholder */
}

.input-floating--warning .input-floating input:focus ~ .input-floating label,
.input-floating--warning .input-floating input:not(:placeholder-shown) ~ .input-floating label {
    color: #fff; /* Solid white when floating */
}

.input-floating--danger .input {
    background-color: var(--dangerColor, #dc3545);
    color: #fff;
    border: 1px solid var(--dangerColorDark, #06233b);
} 

.input-floating--danger .label {
    color: rgba(255, 255, 255, 0.6); /* Faded white for resting placeholder */
}

.input-floating--danger .input:focus ~ label,
.input-floating--danger .input:not(:placeholder-shown) ~ label {
    color: #fff; /* Solid white when floating */
}