/* ==========================================================================
   HT-INPUT-MINIMAL — Input capsule con icono flotante
   Extraído de user_hub.css para reutilizar en booking, selling, etc.
   ========================================================================== */

.ht-input-minimal-group {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
}

/* ── Icono ────────────────────────────────────────────────────────────── */

.ht-input-minimal-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 2;
    font-size: 22px;
    color: var(--color-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 0.2s ease;
}

/* ── Input ────────────────────────────────────────────────────────────── */

.ht-input-minimal {
    width: 100%;
    padding: 16px 16px 16px 48px;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-heading);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: var(--transition-fast);
}

.ht-input-minimal:focus {
    outline: none;
    background-color: var(--color-bg-card);
    border-color: var(--color-text-heading);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.ht-input-minimal-group:focus-within .ht-input-minimal-icon {
    color: var(--color-text-heading);
}

.ht-input-minimal::placeholder {
    font-weight: var(--font-weight-normal);
    color: var(--color-border-strong);
}

/* ── Sin icono (padding izquierdo normal) ─────────────────────────────── */

.ht-input-minimal--no-icon {
    padding-left: 16px;
}

/* ── Icono alineado arriba (para textarea) ────────────────────────────── */

.ht-input-minimal-icon--top {
    top: 18px;
    transform: none;
}

/* ── Textarea ─────────────────────────────────────────────────────────── */

textarea.ht-input-minimal {
    resize: none;
    line-height: 1.5;
}